Refresh DIV tag AJAX (Multiple DIVs)

Hello all,

My first problem is that I would like to refresh a DIV tag on the same page using href onclick handler. Currently I can't seem to get this to work with the code I've developed.

My second problem is that once this works for one DIV I would like that same function to refresh another DIV on the same page using another href. The div ID's would be different of course and the page it calls it loads would also be different.

I'm sure my code is incorrect. I'm new to JavaScript and AJAX.

Thanks for any help on this one. Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<script type="text/javascript">

	function openConnection(){
		var xmlHttp;
			try{	
				xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
			}catch (e){
				try{
					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
				}catch (e){
					try{
						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					}catch (e){
						alert("No AJAX!?");
						return false;
					}
				}
			}

			//xmlHttp.onreadystatechange=function(){
			
			function refreshIt(divID, MyPage) {
				setTimeout('openConnection()', 1000);			
				document.getElementById(#divID).innerHTML=xmlHttp.responseText;
			}
				xmlHttp.open("GET",#MyPage,true);
				xmlHttp.send(null); 
		}
		
</script>

</head>

<body>

        <a href="#" onClick="refreshIt(id1, 'page1.php')">Refresh</a>  
        <div id="id1">Default Page Text - Div One</div>


        <a href="#" onClick="refreshIt(id2, 'page2.php')">Refresh</a>  
        <div id="id2">Default Page Text - Div Two</div>
</body>
</html>

inspireddesign

Newbie Poster

1 post since Jun 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

Ispired,

You are on the right lines there but the code was getting a bit confused. You really need to know javascript well before diving into ajax. It's not really the place to start.

Anyways, here is some revised code (tested under IE6 - should work on most modern browsers).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function getXMLHttp() {
	var xmlHttp;
	try { xmlHttp = new XMLHttpRequest(); }
	catch(e) {
		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;
			}
		}
	}
	return xmlHttp;
}

function refreshIt(divID, MyPage) {
	xmlHttp = getXMLHttp();
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4) { setInnerText(divID, xmlHttp.responseText); }
	}
	xmlHttp.open("GET", MyPage, true);
	xmlHttp.send(null);
	return false;
}

function setInnerText(divID, response){
	var el = (document.getElementById) ? document.getElementById(divID) : document.all[divID];
	if(el) { el.innerText = response; }
}
</script>

</head>

<body>

<a href="" onClick="return refreshIt('id1', 'page1.php')">Refresh</a>
<div id="id1">Default Page Text - Div One</div>



<a href="" onClick="return refreshIt('id2', 'page2.php')">Refresh</a>
<div id="id2">Default Page Text - Div Two</div>

</body>
</html>

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

1 Year Ago

this doesn't work in FireFox 3 - anyone know why?

glennnall

Newbie Poster

1 post since Sep 2010