Question

I have an embedded XMLHttpRequest problem;

The flow of data should go like this:

Interface.php uses modifyRecords.js (XMLHttpRequest) to call information from modifyRecords.php, which in turn uses showRecords.js (XMLHttpRequest) to call information from showRecords.php.

If I could somehow accomplish this, it would save a ton of code copying and/or rewriting.

When I backtrack to find where the errors are, there doesn’t appear to be any problem showRecords.php and modifyRecords.php both load fine individually, just when AJAX calls another AJAX it totally breaks.

The nitty gritty is this:

My user interface is calling modifyRecords.js which is as follows;

function modifyRecords(cell,report,column,oldValue)
{

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
     var xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
     var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById(cell).innerHTML=xmlhttp.responseText;

        }
      }
    xmlhttp.open("GET","modifyRecords.php?report="+report+"&column="+column+"&oldValue="+oldValue,true);
    xmlhttp.send();

}

modifyRecords.php is calling another AJAX function called showRecords.js;

function showRecords(str,column,nextDiv,oldValue)
{
if (str== null)
  {

  document.getElementById(nextDiv).innerHTML="----------------------------------------";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
 var xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
 var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(nextDiv).innerHTML=xmlhttp.responseText;
    document.getElementById(nextDiv).value = oldValue ;


    }
  }
xmlhttp.open("GET","showRecords.php?"+column+"="+str,true);
xmlhttp.send();

}

The problem is that each one of these works in isolation, however, when I use one AJAX function to call a page that is dependent on the second AJAX function, the records do not load.

I know this has something to do with synchronicity, because my only guess is that the referenced page has not finished loading when the referencing function is calling it.

I have tried setting the parameters to “false” for synchronous, instead of the usual asynchronous, however that breaks either function.

What would be the best solution?

I have considered combining all my AJAX functions, which would require a ton of rewrite to make them more generic, and functional for both environments.

Answer 1

Unless I’m much mistaken, you are trying to call your second AJAX script by setting the innerHTML of an element with the first?

Scripts aren’t executed when added with innerHTML. Don’t know why, it’s been an annoyance to me, but you’d probably be better off separating HTML and JS, then putting the HTML in the innerHTML, and eval‘ing the JS.