Δευτέρα 4 Οκτωβρίου 2010

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/]


Παρασκευή 1 Οκτωβρίου 2010

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/

LinkWithin

Blog Widget by LinkWithin

Mobile edition