Embedded XMLHttpRequest (AJAX calling a page which also uses AJAX)

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.

The "records do not load" is not a description of a problem. Is there an error being thrown? Which line "doesn't work"? Have you tried adding alert()s all over and seeing where do they stop? — Ilia G
– Ilia G, Commented Oct 23, 2011 at 19:41
The embedded XMLHttpRequest simply fails, and I could not figure out why. Apparently it is because you cannot innerHTML scripts. Sorry this was the best I could give without knowing what the answerer said. I had not thought to put alerts all over, that seems like a good method to debug for the future. Thank you. — Dương Văn
– Dương Văn, Commented Oct 23, 2011 at 20:03

Niet the Dark Absol · Accepted Answer · 2011-10-23 19:35:58Z

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.

answered Oct 23, 2011 at 19:35

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dương Văn Over a year ago

That is a major inconvenience! Your suggestion is good though, I will try to make one page call both scripts, one after the other, instead of having the scripts reference each other. Thank you for sharing your knowledge.

Collectives™ on Stack Overflow

Embedded XMLHttpRequest (AJAX calling a page which also uses AJAX)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related