AJAX function only works once!

TriKri · 07-06-2007, 10:11 PM

Hello! I have written this test code:

Code:

<html>
<body>
                          
<script type="text/javascript">

function ajaxFunction() {
  var xmlHttp;
  try { //Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  }
  catch (e) {
    try { //Internet Explorer
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      alert("Your browser does not support AJAX!");
      return false;
    }
  }

  xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState==4) {
      document.myForm.time.value = xmlHttp.responseText;
      xmlHttp.responseText = "";
    }
  }
  xmlHttp.open("get","time.php",true);
  xmlHttp.send(null);
}

</script>

<form name="myForm">
  Name: <input type="text" onkeyup="ajaxFunction();" name="username" />
  Time: <input type="text" name="time" />
</form>

</body>
</html>

And in time.php:

Code:

<?php
  echo date("H:i:s");
?>

And it works perfectly fine, the first time. But the second time and the rest of the times (after clearing the textboxes), the same time as before will continue to pop up, each time I release a key. But it should be the current time, not the same time as before!

I would really appreciate some help here. What in my code is wrong? Or is it IE 7 that troubles me?

carlitos_way · 07-06-2007, 11:50 PM

I think (but if i'm thinking wrong, correct me) that IE caches the result, so it's always the same.

this is a classical problem, that can be avoided by passing a random useless parameter, or a datetime, so that IE thinks that you're requesting something new, and it avoids to cache the result.

TriKri · 07-07-2007, 01:12 AM

Quote:

Originally Posted by carlitos_way

I think (but if i'm thinking wrong, correct me) that IE caches the result, so it's always the same.

this is a classical problem, that can be avoided by passing a random useless parameter, or a datetime, so that IE thinks that you're requesting something new, and it avoids to cache the result.

Wow, thanks! That worked! I just added a junk-counter and added it to the the adress as a GET-variable.

Do you know of some way to tell IE to reload the page anyway or maybe to clear that specific history so it will be reloaded?

carlitos_way · 07-07-2007, 11:42 PM

When I use Firefox, I press ctrl+f5 to reload all the page without using the version cached. I think you can try the same on IE

this can be a solution for you, but not for the people who'll see your end application.. but i don't know any other answer, sorry

NancyJ · 07-09-2007, 04:16 PM

I've got the exact same problem in IE, except adding a random number to the url isnt helping, any ideas?

Code:

var xmlHttp
var field

function suggest_weight()
{
	frame = document.getElementById('users_frame_size')[document.getElementById('users_frame_size').selectedIndex].value;
	height_feet = document.getElementById('users_height_feet')[document.getElementById('users_height_feet').selectedIndex].value;
	height_inches = document.getElementById('users_height_inches')[document.getElementById('users_height_inches').selectedIndex].value;
	url = '/suggest_weight.php?frame='+frame+'&height_feet='+height_feet+'&height_inches='+height_inches;
	changeField(url, 'users_goal_weight');
	
}
function changeField(url,fieldName)
{
 	field = fieldName;
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",url+'&rand='+Math.floor(Math.random()*100),true);
	xmlHttp.send(null);
} 

function stateChanged() 
{ 
 
	if (xmlHttp.readyState==4)
	{ 
		document.getElementById(field).value=xmlHttp.responseText;
	}
}

onload = function()
{
	try
	  {
	  // Firefox, Opera 8.0+, Safari
	  xmlHttp=new XMLHttpRequest();
	  }
	catch (e)
	  {
	  // Internet Explorer
	  try
	    {
	    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	    }
	  catch (e)
	    {
	    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	    }
	  }
	return xmlHttp;
}

TriKri · 07-09-2007, 04:37 PM

Quote:

Originally Posted by NancyJ

I've got the exact same problem in IE, except adding a random number to the url isnt helping, any ideas?

How random is the random number? (I haven't used that random generator before, I believe, if it isn't the same as in the C/C++ math library) could it maybe have happened that the rendom generator used the same random seed all the times?

Just taking a shot, try adding a counter instead as I did, there could be a chans that helps.

NancyJ · 07-09-2007, 06:23 PM

I tried a counter and still no luck. And yes I checked that the counter was being incremented

TriKri · 07-09-2007, 06:57 PM

Quote:

Originally Posted by NancyJ

I tried a counter and still no luck. And yes I checked that the counter was being incremented

You have? I was just gonna ask you that!

A1ien51 · 07-10-2007, 01:19 AM

Using POST would clear it up since GET is supposed to cache.

you could also do
xmlhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");

Eric

NancyJ · 07-10-2007, 04:56 PM

tried both the header and the post method - still no luck, it still only works the first time in IE

A1ien51 · 07-10-2007, 05:09 PM

Are you reusing the Object?

The correct order with IE is

open()
onreadystatechange
send()

If you have onreadystatechange before the open, IE will not work.

Eric

glenngv · 07-10-2007, 09:51 PM

You're only setting the xmlHttp variables once. Try creating it everytime changeField function is called.

NancyJ · 07-10-2007, 10:00 PM

alien51 had it - it was the ordering of open onreadystatechange and send, that'll teach me to grab code from w3schools rather than walking up to my pc and getting my own

A1ien51 · 07-12-2007, 04:52 AM

A bunch of people complain about that issue with the W3Schools code. A bunch of pople have sent them emails telling them to change it, but they never did.

Eric

SquidScareMe · 12-12-2007, 03:39 PM

Thanks Alien51. You just saved me.