Hi All,

I am new to Ajax. I wrote my first script with the help of Google :) Please let me know the mistake. I have three menu and it is supposed to load three pages. I used firebug but unable to see any error.

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test page</title>

<script type="text/javascript">

function ajaxpage(url, containerid){

var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}

else
return false

page_request.onreadystatechange=function(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

page_request.open('GET', url, true)
page_request.send(null)
}


</script>
</head> 

<html>
<body>
<div class="leftdiv" style="float:">

<a href="javascript:ajaxpage('page1.htm', 'rightdiv');">Menu1</a>
<a href="javascript:ajaxpage('page2.htm', 'rightdiv');">Menu2</a>
<a href="javascript:ajaxpage('page3.htm', 'rightdiv');">Menu3</a>

</div>


<div class="rightdiv" style="float:right;left;"></div>
</body>
</html>

line 54 should be id="rightdiv" NOT class="rightdiv" . Also, get rid of that "dangling" left;

I made these changes. Still unable to load the page

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test page</title>

<script type="text/javascript">

function ajaxpage(url, containerid){

var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}

else
return false

page_request.onreadystatechange=function(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

page_request.open('GET', url, true)
page_request.send(null)
}


</script>
</head> 

<html>
<body>
<div id="leftdiv" style="float:left;">

<a href="javascript:ajaxpage('page1.htm', 'rightdiv');">Menu1</a>
<a href="javascript:ajaxpage('page2.htm', 'rightdiv');">Menu2</a>
<a href="javascript:ajaxpage('page3.htm', 'rightdiv');">Menu3</a>

</div>


<div id="rightdiv" style="float:right;"></div>
</body>
</html>

AFTER page_request.send(null) put return false; AND
change these:

<a href="javascript:ajaxpage('pageX.htm', 'rightdiv');">MenuX</a>

to:

<a href="#" onclick="return ajaxpage('pageX.htm', 'rightdiv');">MenuX</a>

where "X" is 1, 2, etc.

Actually If I write page_request.onreadystatechange as below, it works

page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

could any one explain why?

save this as hielo.html and try it:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test page</title>

<script type="text/javascript">

function ajaxpage(url, containerid){
	page_request = false;
	if (window.XMLHttpRequest){ // if Mozilla, Safari etc
		page_request = new XMLHttpRequest()
	}
	else if (window.ActiveXObject){ // if IE
		try {
			page_request = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e){
			try{
				page_request = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				return false;
			}
		}
	}
	else{
		return false;
	}
	page_request.onreadystatechange=function(page_request, containerid){
		if (page_request.readyState == 4 && (page_request.status==200 || window.location.protocol.indexOf("http")==-1)){
			document.getElementById(containerid).innerHTML=page_request.responseText;
			page_request=null;
		}
	}

	page_request.open('GET', url, true);
	page_request.send(null);
return false;
}


</script>
</head> 

<html>
<body>
	<div id="leftdiv" style="float:left;">
		<a href="#" onclick="return ajaxpage('page1.htm', 'rightdiv');">Menu1</a>
		<a href="#" onclick="return ajaxpage('page2.htm', 'rightdiv');">Menu2</a>
		<a href="#" onclick="return ajaxpage('page3.htm', 'rightdiv');">Menu3</a>
	</div>
	<div id="rightdiv" style="float:right;"></div>
</body>
</html>

Hi Thanks for your patience. This also not working. I think I am doing some stupid mistake. this code also not working...I have a working code from google but any modification I do, it stop working....there might be some stupid mistake...

change: page_request.onreadystatechange=function(page_request, containerid){ to: page_request.onreadystatechange=function(){ if you leave them there, then they will be undefined within the onreadystatechange function unless you explicitly pass those values. But you do not need to do this since the variables of function ajaxpage() are visible within the onreadystatechange function.

yes it makes sense. Thanks hielo for explaination

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.