title: javascript execute nested ajax call inside a for loop
body: <p>So, I have two code snippets - both of them are executing without errors. Both are meant to do the same thing - loop through a list of words and look up documents these words appear in (SOLR), then pull paragraphs where these words appear from each document. However they don't return the desired result. The first one skips over the nested ajax call (the one inside the for each loop) and if runs the ajax call at all, it's after the main (parent) loop already finished. The second one only works properly if there is an alert there. If the user acknowledges the alert, then the second loop executes correctly. Without the alert, the second loop gets skipped. Can anyone shed some light at what is wrong here. I've tried ajax {complete:...} and ajax{}.done but they didn't work either.
  Here is the first snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>for (var m = 0; m &lt; definitions.length; m++ ) {
   var url = pathtomyfile;
   var doctitle, docname, docs;
   var htmlBody, pHtml, fullHTML;
  
   $.ajax({
    url: url,
    async: false,
    dataType: 'json',
    success: function (result){
     docs = result.response.docs;
    },
    complete: function () {
     $(docs).each (function (){
      var doctitle = this.dc_title_str.toString().replace (/(\.html|\.htm)/, '');
      var docname = filePathToUrl (this.resourcename.toString ());
      var url = decodeURIComponent (docname);
      $.ajax({
       url: url,
       async: false,
       dataType: 'html',
       success: function (resp){
        fullHTML = resp.toString();
        htmlBody = fullHTML.split (/&lt;body&gt;/)[1].split (/&lt;\/body&gt;/)[0];
        htmlBody = htmlBody.replace (/\s/g, " ").replace (/&amp;nbsp;/g, " ").replace (/(&lt;a id="x\d+?")\/&gt;/g, "$1&gt;&lt;/a&gt;");
        var pHtml = $(htmlBody).find("#id").parent();
        pHtml = $(pHtml).wrap('&lt;p/&gt;').parent().html();
        pHtml = pHtml.replace (/\&lt;a id/g, "#s#").replace (/&lt;\/a&gt;/g, "#e#").replace (new RegExp ("\\b(" + en_word.replace (/\s/g, "(&lt;[^&lt;]+?&gt;| )*")+"(s|ed|ing|es)*)\\b", "ig"), "&lt;span style='background-color:yellow'&gt;$1&lt;/span&gt;").replace (/#s#/g, "&lt;a id").replace (/#e#/g, "&lt;\/a&gt;");
        hsnip += "&lt;p&gt;&lt;b&gt;&lt;i&gt;From " + doctitle + ":&lt;/i&gt;&lt;/b&gt;&lt;/p&gt; " + pHtml;
       }
      });
     })
    }
   });
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is the second snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>for (var m = 0; m &lt; definitions.length; m++ ) {
   var url = pathtomyfile;
   var doctitle, docname, docs;
   var htmlBody, pHtml, fullHTML;
   $.ajax({
    url: url,
    async: false,
    dataType: 'json',
    success: function (result){
     docs = result.response.docs;
    }
   });
   alert ('ok');
   for (var b = 0; b &lt; docs.length; b ++) {
    doctitle = docs[b].dc_title_str.toString().replace (/(\.html|\.htm)/, '');
    docname = filePathToUrl (docs[b].resourcename.toString ());
    
    var rawFile = new XMLHttpRequest ();
  
    docname = decodeURIComponent (docname);
  
    rawFile.open ("GET", docname, false);
    rawFile.onreadystatechange = function () {
     if (rawFile.readyState === 4 &amp;&amp; (rawFile.status === 200 || rawFile.status === 0)) {
      fullHTML = rawFile.responseText.toString();
      htmlBody = fullHTML.split (/&lt;body&gt;/)[1].split (/&lt;\/body&gt;/)[0];
  
      var pHtml = $(htmlBody).find("#id").parent();
  
      pHtml = $(pHtml).wrap('&lt;p/&gt;').parent().html();
      hsnip += "&lt;p&gt;&lt;b&gt;&lt;i&gt;From " + doctitle + ":&lt;/i&gt;&lt;/b&gt;&lt;/p&gt; " + pHtml;
     }
    }
    rawFile.send (null);
   }
  }</code></pre>
  </div>
  </div>
  </p>