title: JavaScript/jQuery Variable Scope Issue with Nested .ajax() calls
body: <p>I'm having a difficult time passing the variable <code>postData</code> which is a serialized jQuery array object to a nested child <code>.ajax()</code> call. <code>postData</code> is passed successfully to the first <code>.ajax()</code> call, but when I attempt to use it in the second <code>.ajax()</code> call, it does not post any form elements, as the variable is undefined at that level:</p>
  
  <pre><code>$(".myForm").submit(function () {
      var postData=$(this).serializeArray();
      $.ajax({
          type        : "POST",
          async       : false,
          cache       : false,
          url         : "./insertComment.php",
          data        : postData,
          success: function() {
              $.ajax({
                 type         : "POST",
                 async       : false,
                 cache        : false,
                 url          : "./getComments.php",
                 data        : postData,
                 success: function(comments) {
                     $(".Comments").html(comments);
                 }
              });
          }
      });
      return false;
  });
  </code></pre>
  
  <p>I tried creating a second variable <code>_postData</code> attempting to perpetuate the variable on to the next <code>.ajax()</code> call, but it was unsuccessful (also tried <code>var _postData=$(this).parent().serializeArray();</code> but I still wasn't able to perpetuate the variable):</p>
  
  <pre><code>$(".myForm").submit(function () {
      var postData=$(this).serializeArray();
      $.ajax({
          type        : "POST",
          async       : false,
          cache       : false,
          url         : "./insertComment.php",
          data        : postData,
          success: function() {
              var _postData=$(this).serializeArray();
              $.ajax({
                 type         : "POST",
                 async       : false,
                 cache        : false,
                 url          : "./getComments.php",
                 data        : _postData,
                 success: function(comments) {
                     $(".Comments").html(comments);
                 }
              });
          }
      });
      return false;
  });
  </code></pre>
  
  <p>I tried implementing so-called JavaScript closure (something I still don't fully grok), but that led to more undefined variables and more failure:</p>
  
  <pre><code>$(".myForm").submit(function () {
      var postData = function() {
          $(this).serializeArray();
      }();
      $.ajax({
          type        : "POST",
          async       : false,
          cache       : false,
          url         : "./insertComment.php",
          data        : postData,
          success: function() {
              $.ajax({
                 type         : "POST",
                 async       : false,
                 cache        : false,
                 url          : "./getComments.php",
                 data        : postData,
                 success: function(comments) {
                     $(".Comments").html(comments);
                 }
              });
          }
      });
      return false;
  });
  </code></pre>
  
  <p>I tried searching around and tried implementing several other techniques, including jQuery traversal (<code>.parent()</code>, <code>.filter()</code>, etc.), but was unsuccessful.  I know this is a common problem for a lot of folks, but so far I have not found a simple, understandable solution. Any suggestions would be greatly appreciated.  Thanks!</p>