Member Avatar for gauri_agr

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>
  • 2 Contributors
  • 9 Replies
  • 140 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by gauri_agr
Member Avatar for hielo

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

Edited by hielo because: typo
Member Avatar for gauri_agr

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>
Member Avatar for hielo

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.

Member Avatar for gauri_agr

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?

Member Avatar for hielo

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>
Edited by hielo because: typo
Member Avatar for gauri_agr

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...

Member Avatar for hielo

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.

Member Avatar for gauri_agr

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.