Evaluate scripts while working on AJAX Requests

May 20, 2009

Evaluate scripts while working on AJAX Requests

Categories: AJAX, CSS, HTML, JavaScript, Programming

Tags: AJAX, JavaScript

Written By: admin

Introduction

Recently, one of my reader came up with a query like “Why JavaScript is not running after loading a page through AJAX, but if we run the respective page alone without any AJAX – JavaScript is working fine”, Yeah, I do faced this sort of problem while I am loading respective pages through AJAX. To know more about how to load an external page through AJAX, here is the nice post of the same “Snippet Code for Simple Ajax Tabs with cool CSS Styles“.

Solution

For this to resolve, we need to parse the code which we are loading through AJAX, that is once httprequest status is 200 (I mean ’success’), while sending the respective rendered data to a place holder or any div (in the form of ‘innerHTML‘) you need to parse/evaluate the content accordingly. I mean need to check whether any JavaScript code/ Script Tag is present in the respective HTML content or not, for this actually we need to use “eval” to evaluating the script accordingly. Below is the generic function we need to call when respective content is loading through AJAX. Just go through the code you will let you know everything.

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<scripts.length; i++) {
			try {
				eval(scripts[i]);
			}
			catch(ex) {
				// do what you want here when a script fails
			}
		}
		// Return the cleaned source
		return source;
}

Call the above function like below (that is once the httprequest.status is ’success’)

function responsefromServer(divElementId, pageErrorMessage) {
   var output = '';
   if(req.readyState == 4) {
      if(req.status == 200) {
         output = req.responseText;
         document.getElementById(divElementId).innerHTML = parseScript(output);
         } else {
         document.getElementById(divElementId).innerHTML = pageErrorMessage+"\n"+output;
         }
      }
  }

Below is the full code

For reference, goto the article – Snippet Code for Simple Ajax Tabs with cool CSS Styles, just download the respective file and after unzipping, click on JS folder and open ‘ajax.js‘ in your respective editor and compare, you will get an idea on how we can overcome our problem.

var req;
function callPage(pageUrl, divElementId, loadinglMessage, pageErrorMessage) {
     document.getElementById(divElementId).innerHTML = loadinglMessage;
     try {
     req = new XMLHttpRequest(); /* e.g. Firefox */
     } catch(e) {
       try {
       req = new ActiveXObject("Msxml2.XMLHTTP");  /* some versions IE */
       } catch (e) {
         try {
         req = new ActiveXObject("Microsoft.XMLHTTP");  /* some versions IE */
         } catch (E) {
          req = false;
         } 
       } 
     }
     req.onreadystatechange = function() {responsefromServer(divElementId, pageErrorMessage);};
     req.open("GET",pageUrl,true);
     req.send(null);
  }
 
function responsefromServer(divElementId, pageErrorMessage) {
   var output = '';
   if(req.readyState == 4) {
      if(req.status == 200) {
         output = req.responseText;
         document.getElementById(divElementId).innerHTML = parseScript(output);
         } else {
         document.getElementById(divElementId).innerHTML = pageErrorMessage+"\n"+output;
         }
      }
  }
 
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<scripts.length; i++) {
			try {
				eval(scripts[i]);
			}
			catch(ex) {
				// do what you want here when a script fails
			}
		}
		// Return the cleaned source
		return source;
}

Above code will help you a lot while developing AJAX related Web Applications…

Articles which you would like to read:

Zen Says:
May 22nd, 2009 at 4:40 am

Hello,
Its me again , can you please to find some tips about “recent comment” but using Jquery ?I am looking for it for days but I still not see any.
I am very thank you if you publish 1 tip about it .
Have a gooday my friend
Zen

Run Javascript Code After an AJAX Request | linein designs Says:
June 5th, 2009 at 6:11 am

[...] to eval() the XMLHttpRequest data being sent. But thanks to developersnippets.com they wrote a very helpful article that fixes the issues I was [...]