0

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
11
Views
7 Years
Discussion Span
Last Post by gauri_agr
0

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

Edited by hielo: typo

0

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

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.

0

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?

0

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: typo

0

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

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.