Calling a PHP page with MySQL query from Javascript function then returning results to another javascript function

Question

I am refactoring some code. I have a PHP page that contains a MySQL query and stores the result in a PHP variable $my_result. This result is then echoed to a Flash SWF during embedding with SWFObject.

I now want to call this PHP page that makes the query from a javascript function like so - one change I have made to the PHP is that instead of storing the result in a variable $my_result I am echoing the result.

Javascript function to call the PHP page and make the database query

function getNewUploads() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
       if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    alert(xmlhttp.responseText); // shows the correct output in an alert box
    return xmlhttp.responseText;
       }
    }
 xmlhttp.open("GET","dBaseConnect_uploadStep2.php",true);
 xmlhttp.send();    
}

Then I have the embedding of the Flash which I only want to happen when a certain tab is clicked on a page and is handled by jabvascript -

function show_tab(tab_id) {

    $(tab_id).show();
    if(tab_id == "#tab_2") {
      var data_string = getNewUploads(); // CALLING THE FUNCTION TO CALL THE PHP QUERY  
      alert(data_string); // shows undefined in the alert box
      var so = new SWFObject(".....");          
      so.addVariable("theDataString", data_string); 
      so.write("flashcontent2");
    }
}

So it seems that the getNewUploads() function does not return the result from the PHP page.

Can anyone shed some light on my mistake please. Thanks

Answer 1

The call is asynchronous. After you call send , the call begins in the background. In the meantime, getNewUploads returns. Later, the function you've assigned is called with the answer. When you do return xmlhttp.responseText , you're returning from this anonymous function (assigned to onreadystatechange), not from getNewUploads (which is already done).

You can use a callback instead. Something like:

function getNewUploads(callback) {
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
       if (xmlhttp.readyState==4 && xmlhttp.status==200) {
         callback(xmlhttp.responseText);
       }
    }
    xmlhttp.open("GET","dBaseConnect_uploadStep2.php",true);
    xmlhttp.send();    
}

function show_tab(tab_id) {
    $(tab_id).show();
    if(tab_id == "#tab_2") {
      getNewUploads(function(data_string) {
        alert(data_string);
        var so = new SWFObject(".....");          
        so.addVariable("theDataString", data_string); 
        so.write("flashcontent2");
      }); // CALLING THE FUNCTION TO CALL THE PHP QUERY  
    }
}

We define getNewUploads to take a single argument, callback . Then, in the success function, we call the callback with a single argument, the response text. In show_tab , we pass an anonymous function that takes a single parameter (the response text) to getNewUploads , as the callback parameter.

Answer 2

The true in xmlhttp.open("GET","dBaseConnect_uploadStep2.php", true); makes it asynchronous and hence the error. Change it to:

function getNewUploads() {
  //initialize xmlhttp
  xmlhttp.open("GET", "dBaseConnect_uploadStep2.php", false);
  xmlhttp.send();    
  if(xmlhttp.status == 200) 
    return xmlhttp.responseText;
  else
    return "Oops :(";
}