How to execute javascripting inside of ajax response ?

Posted on by

This is bit complecated to under stand. let me explain.

Problem : I have written one html+scripting response from ajax code. sometime problem is that in response we write <script> tags. and we think that these script tags are executed when we use following code

Let say Ajax response is
-------------------------
<div>Abc</div>
<script language='javascript'>
alert('Alert me :: from ajax');
</script>

when we get such response we thing that alert will be excuted. but officially its not executed. script element will be added in all collection node. considering as html entities. and not as script entities. so for executing script as script we have to do things are below.

    if (xmlHttp_page.readyState==4 || xmlHttp_page.readyState=="complete")
    {
      document.getElementById('main_div').innerHTML= xmlHttp_page.responseText;
	var ob = document.getElementsByTagName("script");
	for(var i=0; i<ob.length-1; i++){
	if(ob[i+1].text!=null) eval(ob[i+1].text);
	}
    }

Last time I tried this option but it did not worked for me. I thought it was basically problem with IE only. as firefox working properly. then again I google many people suggested that scripting should be appended on head elements. but still that also doesn’t work.

After lots of attempts I found when response is send by server then first data (or first line of data) need to be html then only above function works for it. To understand it properly let me explain you in short.

just create 2 Files.

1. index.html

2. dump.php (this will be used for ajax response)

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Response</title>
</head>
<body >
<script type='text/javascript'>
	function GetXmlHttpObject()
	{
  	var xmlHttp=null;
  	try
  	{
 			// Firefox, Opera 8.0+, Safari
 			xmlHttp=new XMLHttpRequest();
 		}
		catch (e)
 		{
 			// Internet Explorer
 		try
  	{
  		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  	}
 		catch (e)
  {
  	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
	}
	return xmlHttp;
	}
var oXML
function TryIt()
{
	oXML = GetXmlHttpObject();
	oXML.open("GET","dump.php?cacheBust=111",true);
	oXML.onreadystatechange=showPage;
	oXML.send(null)
}
function showPage()
{
	if (oXML.readyState==4 || oXML.readyState=="complete")
	{
		document.getElementById('data').innerHTML = oXML.responseText ;
		var ob = document.getElementsByTagName("script");
		for(var i=0; i<ob.length-1; i++){
		if(ob[i+1].text!=null) eval(ob[i+1].text);
		}

	}
}
</script> 

<input type='button' value='try it' onclick='TryIt()'>
<div id="data" style="">
</div>
</body>
</html>

Dump.php

<h3>Testing</h3>
<script type='text/javascript'>
	alert('testing');
</script>

Now execute this code. you will find it works on IE as well as in FF. now if we just change that dump.php as follows then you will not receive alert.

Dump.php

<script type='text/javascript'>
	alert('testing');
</script>
<h3>Testing</h3>

So always remember try to send html first in ajax response.

Solution By : Runwalsoft ( Manish Runwal).