Member Avatar for inspireddesign

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


        <a href="#" onClick="refreshIt(id2, 'page2.php')">Refresh</a>  
        <div id="id2">Default Page Text - Div Two</div>
</body>
</html>
  • 4 Contributors
  • 3 Replies
  • 877 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by okansari
Member Avatar for Airshow

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>

<br>

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

</body>
</html>

Airshow

Member Avatar for glennnall

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

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.