Evaluate scripts while working on AJAX Requests

On 05.20.09, In AJAX, CSS, HTML, JavaScript, Programming, by admin

Tags: AJAX, JavaScript

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…

Related Entries...

Simple steps to develop AJAX Website - DeveloperSnippets
As we all know AJAX is rocking the Web World all around, just I had a thought to developer a simple A ...
Adding a div, button to the body tag dynamically using JavaScript DOM
Here is a simple snippet on adding a "div" to the body tag dynamically using JavaScript, after going ...
Error: Invalid source HTML for this operation
Hi developers, today I encountered one error which works fine in Mozilla Firefox but giving an error ...
How To: Make Tabs Reload and Evaluate Scripts using ExtJS
Introduction: When I was working on Ext JS Tab Panels, I was strucked at one position like, let me e ...
Remove duplicates from an array using JavaScript
Here is a simple and easily understandable snippet code, to remove duplicates from an existing array ...
How to resolve browser compatibility issues while working with JavaScript, AJAX and XML
After going through this article, you will get an idea on resolving browser compatibility issues whil ...
Removing duplicate values from multi dimensional array using JavaScript
Introduction: This article will helps you in removing any duplicate values from Multi Dimensional A ...
Netscape is the 'navigator.appName' for Google Chrome
Just think what Google Chrome would return when we run browser detection code written in JavaScript ? ...
Comparing two Arrays and remove duplicates from Original Array using JavaScript concat and slice
Introduction: I would like to say this article going to help most of the developers who are in need ...
System Error: -1072896658 in IE
When I am running my Ajax web application, the application is rendering properly in Mozilla Firefox b ...

By Blogsdna

admin

Visit Authors Website | All Articles From This Author

Zen

05.20.09

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

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