Calling javascript through ajax

webdevised · #1 (**permalink**) 07-15-08, 09:58 PM

I have a quick question about my ajax script..I have a script that loads the content of a another page into a div..

ajax.htm

HTML Code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">

	</style>
	<script type="text/javascript">
	function ajaxFunction(id, url){
		var xmlHttp;
		try {// Firefox, Opera 8.0+, Safari
			xmlHttp = new XMLHttpRequest();		
		} catch (e) {// Internet Explorer
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					alert("Your browser does not support AJAX!");
					return false;
				}
			}
		}
		
		xmlHttp.onreadystatechange = function(){
			if (xmlHttp.readyState == 4) {
				//Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
				var respText = xmlHttp.responseText.split('<body>');
				elem.innerHTML = respText[1].split('</body>')[0];
			}
		}

		var elem = document.getElementById(id);
		if (!elem) {
			alert('The element with the passed ID doesn\'t exists in your page');
			return;
		}
	
		xmlHttp.open("GET", url, true);
		xmlHttp.send(null);
	}		
</script>
</head>

<body>
	<div id="test"></div>
	<form>
		<input type="button" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','time.asp');"/>
	</form>
</body>
</html>

time.asp

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<%
response.write("hello from asp")
%>

<script type="text/javascript">
document.write("Hello from javascript");
</script>
</body>
</html>

I can get any thing to load in the time.asp page but the javascript..

The reason i need this is that i have a box on my page that when someone clicks it it will load the content from the asp page and use a javascript counter to count page views..

Any thoughts??

Thanks a head of time..

Vicious · #2 (**permalink**) 07-16-08, 05:30 AM

Javascript you get via an AJAX call won't be evaluated.
You'll have to find a solution where you put the code from time.asp into the first page in a function. When your AJAX call is finished, you then call that function.

webdevised · #3 (**permalink**) 07-16-08, 01:00 PM

I used the eval code from http://www.w3schools.com/jsref/jsref_eval.asp

my new code for time.asp is this

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<%
response.write("hello from asp")
%>

<script type="text/javascript">
eval("alert('Hello world')");
</script>
</body>
</html>

now this works.. but how can i call that alert from an extranal js file..??

--------------------------------------------------------------
like on test.js i have this.

HTML Code:

eval("alert('Hello world')");

in time.asp i have this.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<%
response.write("hello from asp")
%>

<script type="text/javascript" src="test.js"></script>
</body>
</html>

this doesn't work.. ummmm

Nico · #4 (**permalink**) 07-16-08, 01:06 PM

You can't do that. I suggest putting your response into a XML document, eg:

xml Code:

<response>
    <alert>Hello world!</alert>
    <html><![CDATA[ HTML HERE ]]></html>
    <!-- Or: -->
    <script>myscript.js</script>
</response>

... and then you could parse each part separately. Or even dynamically add a script tag to the header and load the URL you specified in the XML document.