Extract HTML table's data in a new window

The question:

How could I extract the data that already rendered as a HTML Table in my web site, as a new Table that will be easily copied-pasted in an Excel spreadsheet?

The answer:

In case that our Table element has 'data' as id then we could use the following javascript function:

function showDataInNewWindow(){

try{

var tmp = '<table border="1"><thead><tr>';

$("#data th").each(function () { // iterate tr

tmp= tmp+'<th>'+$(this).text()+'</th>';

});

tmp=tmp+'</tr></thead><tbody>';

$('#data tr').each(function () { // iterate tr

tmp = tmp+' <tr>';

$(this).find('td').each(function () { // iterate td

tmp =tmp+ '<td>'+$(this).text()+'</td>';

});

tmp=tmp+'</tr>';

});

tmp=tmp+'</tbody></table>'

myWindow=window.open('','Data','width=800,height=600,left=0,top=0');

myWindow.document.write(tmp);

myWindow.document.close();

myWindow.focus();

}catch(e){

alert(e);

}

}

Notes:

1) jQuery library has been used

2) For more information leave a comment and I will reply as soon as possible!

JavaScript: Expand/Collapse function for any kind of Elements

I have written a simple function in JavaScript that can be used for expansion and collapsion of any kind of element. The expansion/collapsion is performed by changing the value of the style.display between 'none' and ''. Value 'none' means that the element won't be shown at all while '' that the element will be shown.
In order to use this function you should add the attributes groupId having a common value for the elements of the same group (let's say of the same table in the same ul) and collapsable="true" (for those elements of the group that should be able to be collapsed and expanded)

Sample HTML:


<table>
<tr groupid="aTable">
<td>Static row</td>
</tr>
<tr groupid="aTable" collapsable="true">
<td>Show/hide row 1</td>
</tr>
<tr groupid="aTable" collapsable="true">
<td>Show/hide row 2</td>
</tr>
<tr groupid="aTable">
<td>
<a href="onclick()" onclick="expandCollapse('aTable','collapse',this);">expand</a>
</td>
</tr>
</table>


JavaScript function:

function expandCollapse(tableId,collapseMSG,obj){
$("[collapsable='true'][groupId='"+tableId+"']").each(

function(){
if(this.style.display=='none'){
this.style.display='';
}else
this.style.display='none';
}
);
var newMSG=(obj.opp)?obj.opp:collapseMSG;
obj.opp=obj.innerHTML;
obj.innerHTML=newMSG;
}


Notes:

jQuery is prerequired to use this function.

How to run JavaScript after sucessful completion of Ajax request

A common issue that rises whenever you make ajax call is how you 'll be able to call initializing javascript of the changed html elements. A potential solution is to create a javascript function that you 'll call after the success complete of the ajax request.
There is also another solution that is even better and more dynamic. This solution is to use a method that parses your whole html and call any part of scripting code.

The code [1]:
function parseScript(_source) {
var source = _source;
var scripts = new Array();
// Strip out tags
while(source.indexOf("<script")> -1 || source.indexOf("</script")> -1) {
var s = source.indexOf("<script");
var s_e = source.indexOf(">", s);
var e = source.indexOf("</script", s);
var e_e = source.indexOf(">", e);

// Add to scripts array
scripts.push(source.substring(s_e+1, e));
// Strip from source
source = source.substring(0, s) + source.substring(e_e+1);
}

// Loop through every script collected and eval it
for(var i=0; i
try {
if((scripts[i]).indexOf("parseScript(")==-1){//ignore javascript of current function!!
eval(scripts[i]);
}
}
catch(ex) {
alert(scripts[i]);
alert(ex);
// do what you want here when a script fails
}
}
// Return the cleaned source
return source;
}

Additional notes:
I propose you to use jquery and add any code that should be called in functions that had window load event:
$(window).load(function(){//whatever you want to execute});
And after successful completion of ajax request to trigger the load event of window by calling
$(window).trigger("load");

References:
[1] Evaluate scripts while working on AJAX Requests [http://www.developersnippets.com/2009/05/20/evaluate-scripts-while-working-on-ajax-requests/]
[2] Run Javascript Code After an AJAX Request [http://www.linein.org/blog/2009/06/05/run-javascript-code-after-an-ajax-request/]

How to make your old web application use ajax to avoid page refresh

The problem
Have you already implemented a web application that works perfect but it doesn't make any ajax request? User are bored of unlimited refresh that happens each time they press any link or button?

The solution
I have the solution! Simply use ajax to make your request, the way you are used to and implement success function to update your pages' root element[1]!

Some code

1) Simply add the following JavaScript function in your js library:

function ajaxReq (requestURL, what2change){
$.ajax({
url: requestURL,
cache: false,
async: true,
dataType: 'html',
success: function(html){
var x = $(html);
$('#'+what2change,x).each(
function (i) {
document.getElementById(what2change).innerHTML=this.innerHTML;
}
);
}
});

And use it writting something like the following:
a) <input onclick="ajaxReq ('index.jsp?param1=2','root')" type="button">
b) <a href="http://www.blogger.com/post-edit.do#" onclick="ajaxReq ('index.jsp?param1=2','root')">

[1] In most cases you have some div or table that contains the part of the page that changes in each refresh. This should have a specific id the value of this id should be set also as value of the variable 'what2change' in the ajaxReq function.

Additional Information
If you use JavaScript that runs while your page is being rendered, then you should also read my new post "How to run JavaScript after sucessful completion of Ajax request" that is based on the articles http://www.developersnippets.com/2009/05/20/evaluate-scripts-while-working-on-ajax-requests/ and http://www.linein.org/blog/2009/06/05/run-javascript-code-after-an-ajax-request/

How to render the content of an HTML without using iFrame

As a web developer I was asked to render the HTML code of a static HTML file in a div of dynamically generated HTML page. So I found out several alternative solutions.

Solution#1 Parse the static HTML file in the server-side and render only the content that is between "<body>" and "</body>". This solution would cost time to access the file, memory to keep the files content, process to parse the file's content, memory to keep the process result and finally time to send the result to the client.

Solution#2 Keep only the content of the HTML that is between "<body>" and "</body>" in the file in order to avoid process. Again time to access, memory to keep and time to send the result was needed. And additionally we had to edit the static HTML in each update. Cost of maintenance is the first that we try to reduce. We aren't developing a small and static web site but a dynamic web application that may include several static HTML files.

Solution#3 Do whatever is described in Solution#1 but do it in the client's side using ajax. Response is sent including only the javascript call which will retrieve the HTML file and will parse and render it in the right place. No memory needed. Web server handler static HTML file transfer as any other file's.

Solution#4 Do whatever is described in Solution#3 but additionally retrieve which are the included style sheet and javascript files and include them. So the web designer gives you the whole set of HTML Code, Style Sheet files [CSS], JavaScript code [JS] and other resources [images, flash and whatever] and you simple add a small ajax call that retrieved the HTML and renders it in a given div.

NOTE: I combined code from two sources "Dynamic Ajax Content [Dynamic Drive DHTML Script]" and "XUL Ajax" and I also added a piece of code to make it possible to retrieve which .js and .css files are included in the static file in order to add them in the container HTML via ajax.

In order to use the javascript you should add in the container HTML the following:

<div id="storage" style="display:none;"></div>

<div id="displayed"></div>

<script type="text/javascript">

document.onload=ajaxpage('YOU_STATIC_PAGE.html','displayed');

</script>

and you should also include the "AjaxPage.js" in the header of the container.

In case you have any problem using the javascript simply leave a comment and I will help you as soon as possible.

Sources:

1) Dynamic Ajax Content [Dynamic Drive DHTML Script]

2) XUL Ajax

Files:

1) AjaxPage.js