Javascript inside Ajax called pages not working

[ankur0101]

Hi,

I am running in a very strange situation. Problem is than javascript are not working in loaded page inside upper page which is called by ajax.

I have 2 pages. Main.html is the one which is accessible to user. User just write the name of the file in browser and it opens up.

<script>
    	
		
		function showbox()
		{
			var str2 = document.getElementById('roll_no').value;
			
			 if (str2=="")
			  {
			  document.getElementById("pointer").innerHTML="";
			  return;
			  }
			 
			if (window.XMLHttpRequest)
			  {// code for IE7+, Firefox, Chrome, Opera, Safari
			  xmlhttp=new XMLHttpRequest();
			  }
			else
			  {// code for IE6, IE5
			  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			  }
			xmlhttp.onreadystatechange=function()
			  {
			  if (xmlhttp.readyState==4 && xmlhttp.status==200)
			    {
			    document.getElementById("pointer").innerHTML=xmlhttp.responseText;
			    }
			  }
			
			xmlhttp.open("GET","http://localhost/internal_page.html", true);
			xmlhttp.setRequestHeader('X_Requested_With', 'XMLHttpRequest');
			xmlhttp.send();

		}
</script>
<button class="btn btn-info btn-large" type="button" name="submit" onclick="showbox()">Lookup</button>
<div class="container-fluid">
<p id="pointer">
            		
</p>
</div>

 The code of internal file internal_page.html is as below

<script type="text/javascript">
    	
			
		function addnew_row()
		{
			alert("hi");		
		}
	
</script>
<button class="btn btn-mini btn-primary" type="button" onclick="addnew_row()">Add</button>

So when user opens Main.html and clicks on Button, it opens a page inner_page.html inside id="pointer" perfectly but when user clicks on Add button, it does not call addnew_row() function.

 

I think when user clicks on Add button, it should give alert saying hi.

However when I write

onclick="alert('hi')", that gives an alert on screen.

 

Now if I open inner_page.html directly through browser, and clicks on Add button, then is gives alert saying hi because it calls addnew_row()

 

Conclusion is when external page is called inside current page using ajax, the javascript on external page does not work.

How to deal with this ? Why javascript inside newly called page does not work ? What is the solution to this problem ?

 

Thanks

[requinix]

All AJAX does is get stuff from a URL. The browser won't try to parse or interpret anything returned unless you try to put it into your page somewhere. But even then the browser will not execute

 

Find another way to do what you want. By the way, what are you trying to do?