title: Jquery nested ajax call remember first HTML response in inner ajax call
body: <p>Ok. I need to do something like this:</p>
  
  <p>1) Make a GET ajax request and remember the HTML response in a variable.
  2) Inside this first ajax request (in the callback function) I need to make a second POST ajax request and append the HTML response to the remembered HTML response from the first request.
  3) Replace a div with the HTML from the variable.</p>
  
  <p>This is how I'm going about it:</p>
  
  <pre><code>    var firstHtml;
  
      $.ajax({
          url: 'page.php',
          success: function(data) {
              firstHtml = data;
              $.ajax({
                  type: 'POST',
                  url: 'page2.php',
                  data: 'param1=a&amp;param2=b',
                  success: function(htmlResponse){
                      // the firstHtml var is NULL here... why?
                      var finalHtml = firstHtml + htmlResponse;
                      $('#div').html(finalHtml);              
                  }
              });
          }
  
  
      });
  </code></pre>
  
  <p>But as you can see from the comment it doesn't work. The variable firstHtml is suddenly NULL inside the second AJAX request.</p>