title: Javascript nested AJAX requests
body: <p>I've read a couple of other threads on this but can't quite seem to grasp it. I don't really know a lot about Javascript and have basically guessed my way through so far. I have one function run an AJAX request to get some rows from a database. Then for each row, I need to run a nested  AJAX request and return it's values to the first function. Both AJAX requests work independently however I don't know how to nest them correctly. Here is what I have:</p>
  
  <pre><code>function updateSummaryVariablesInput(typeId) {
      if (typeId=='') {
          document.getElementById('summaryVariables').innerHTML='';
          return;
      }
      if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp2=new XMLHttpRequest();
      } else {
          // code for IE6, IE5
          xmlhttp2=new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp2.onreadystatechange=function() {
          if (xmlhttp2.readyState==4 &amp;&amp; xmlhttp2.status==200) {
              xmlDoc=xmlhttp2.responseXML;
              txt='&lt;table&gt;';
              x=xmlDoc.getElementsByTagName('row');
              for (i=0;i&lt;x.length;i++) {
                  if (x[i].getElementsByTagName('common')[0].childNodes[0].nodeValue &lt; 1) {
                      txt=txt + '&lt;tr&gt;&lt;th style=\"width: 150px;\"&gt;' + x[i].getElementsByTagName('label')[0].childNodes[0].nodeValue +  '&lt;/th&gt;&lt;td&gt;';
                      // Select
                      if (x[i].getElementsByTagName('input')[0].childNodes[0].nodeValue == 'select') {
                          txt=txt + '&lt;select name=\"' + x[i].getElementsByTagName('title')[0].childNodes[0].nodeValue + '\"&gt;&lt;option&gt;&lt;/option&gt;';
                          myoptions = getSummaryVariableOptions(x[i].getElementsByTagName('id')[0].childNodes[0].nodeValue);
                          //alert(myoptions.length);
                          for (j=0;j&lt;myoptions.length;j++) {
                              txt=txt + '&lt;option value=\"' + myoptions[j] + '\"&gt;' + myoptions[j] + '&lt;/option&gt;';
                          }
                          txt=txt + '&lt;/select&gt;';
                      }
                      // Text
                      if (x[i].getElementsByTagName('input')[0].childNodes[0].nodeValue == 'text') {
                          txt=txt + '&lt;input type=\"text\" name=\"' + x[i].getElementsByTagName('title')[0].childNodes[0].nodeValue + '\" /&gt;';
                      }
                      txt=txt + '&lt;/td&gt;&lt;/tr&gt;';
                  }
              }
              txt=txt + '&lt;/table&gt;';
              document.getElementById('summaryVariables').innerHTML=txt;
          }
      }
      xmlhttp2.open('GET','/cgi/new/Ajax/getOutageVariablesByTypeId.php?typeId='+typeId,true);
      xmlhttp2.send();
  }
  
  function getSummaryVariableOptions(variableId) {
      var options = new Array();
      if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp3=new XMLHttpRequest();
      } else {
          // code for IE6, IE5
          xmlhttp3=new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp3.onreadystatechange=function() {
          if (xmlhttp3.readyState==4 &amp;&amp; xmlhttp3.status==200) {
              xmlDoc=xmlhttp3.responseXML;
              x=xmlDoc.getElementsByTagName('row');
              for (i=0;i&lt;x.length;i++) {
                  options[i] = x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue;
              }
              alert(options.length);
          }
      }
      xmlhttp3.open('GET','/cgi/new/Ajax/getOutageVariableOptionsByVariableId.php?variableId='+variableId,true);
      xmlhttp3.send();
      //alert(options.length);
      return options;
  }
  </code></pre>
  
  <p>Run as is, I will get an alert with a valid number, e.g. 5. If I uncomment any of the other alert functions they will only output 0.</p>