Ajax function only brings back results once

JavaScript
1

I’m calling a ajax function that brings back the results, it works fine the first time i call the ajax function but if i call it again nothing get’s updated.

here is ajax function in search.php (This is just an example - to keep it simple i’m only passing a random number)


function searchUsers() {

  var iamt = document.getElementById('sGender').value;
  var seekingt = document.getElementById('sSeeking').value;
  var ageFromt = document.getElementById('sAgeFrom').value;
  var ageTot = document.getElementById('sAgeTo').value;
  var milest = document.getElementById('sMiles').value;
  var townt = document.getElementById('sTown').value;

  var ajaxRequest;  // The variable that makes Ajax possible!
	
  try {
	// Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
  } 
  catch (e) {
       // Internet Explorer Browsers
    try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch (e) {
      try {
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } 
      catch (e) {
	// Something went wrong
	return false;
      }
    }
  }  

  var url = "http://localhost/temp/searchusers.php";
  
  var params = "rand="+Math.floor(Math.random()*100);

  ajaxRequest.open("POST", url, true);

  ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ajaxRequest.setRequestHeader("Content-length", params.length);
  ajaxRequest.setRequestHeader("Connection", "close");

  ajaxRequest.onreadystatechange = function() {
    if(ajaxRequest.readyState != 4) {
      document.getElementById('search_loading').style.display='block';
    }
    if(ajaxRequest.readyState == 4) {
      if (ajaxRequest.status == 200 || ajaxRequest.status == 304) {  
      }
      document.getElementById('search_content').innerHTML = ajaxRequest.responseText;
    }
  } 
  ajaxRequest.send(params);
}

Here is the searchusers.php where the rand variable get’s sent.



<?php
$rand = $_POST['rand'];
echo $rand;
?>

for the above example it’s just bringing back the random number i sent in the first place, BUT it only does this when i call the ajax function for the first time, if i called that function again - nothing get’s updated? It should return a new random number.

Does anybody know why this happens and how to fix this?

2

Do a bit of debugging to discover what the code is actually doing. For example,


function searchUsers() {


  alert("if u see this then you know the function got called");



  var iamt = document.getElementById('sGender').value;
  var seekingt = document.getElementById('sSeeking').value;
  var ageFromt = document.getElementById('sAgeFrom').value;
  var ageTot = document.getElementById('sAgeTo').value;
  var milest = document.getElementById('sMiles').value;
  var townt = document.getElementById('sTown').value;

  var ajaxRequest;  // The variable that makes Ajax possible!
	
  try {
	// Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
  } 
  catch (e) {
       // Internet Explorer Browsers
    try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch (e) {
      try {
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } 
      catch (e) {
	// Something went wrong
	return false;
      }
    }
  }  

  alert("if u see this then you know that you probably successfully created an xmlhttp object");

  var url = "http://localhost/temp/searchusers.php";
  
  var params = "rand="+Math.floor(Math.random()*100);

  ajaxRequest.open("POST", url, true);

  ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ajaxRequest.setRequestHeader("Content-length", params.length);
  ajaxRequest.setRequestHeader("Connection", "close");

  ajaxRequest.onreadystatechange = function() {
    if(ajaxRequest.readyState != 4) {
      document.getElementById('search_loading').style.display='block';
    }
    if(ajaxRequest.readyState == 4) {
      alert("if u see this you know the response came back and the ready state was 4");
      if (ajaxRequest.status == 200 || ajaxRequest.status == 304) {  
      }
      alert(ajaxRequest.status);
      document.getElementById('search_content').innerHTML = ajaxRequest.responseText;
    }
  } 
  ajaxRequest.send(params);
}

Hopefully you get the idea. As you verify the code is doing what you expect, you can do more detailed debugging in the areas of the code that seems questionable, or just aren’t working the way you expected.

3

thanks for you reply…

I did try that though and it seems to call the function ok it just doesn’t post the data again.

It’s strange… There’s always something that just doesn’t wont to work!

4

How, specifically, have you determined that it doesn’t post the data?

Are you suggesting that your onreadystatechange event handler function never gets called? Have you tried sticking an alert at the top of the function, so that it will happen regardless of the value of ajaxRequest.readyState?

5

Hi, yes i added various alerts - it seemed to call the function ok and even the show the response text the first time round but if i tried to call that function again it still calls the function but doesn’t do any of the ajax stuff…

I’ve solved this now, i used GET instead of POST and it worked fine - strange why post didn’t work as expected…