JavaScript/jQuery Variable Scope Issue with Nested .ajax() calls

Question

I'm having a difficult time passing the variable postData which is a serialized jQuery array object to a nested child .ajax() call. postData is passed successfully to the first .ajax() call, but when I attempt to use it in the second .ajax() call, it does not post any form elements, as the variable is undefined at that level:

$(".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;
});

I tried creating a second variable _postData attempting to perpetuate the variable on to the next .ajax() call, but it was unsuccessful (also tried var _postData=$(this).parent().serializeArray(); but I still wasn't able to perpetuate the variable):

$(".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;
});

I tried implementing so-called JavaScript closure (something I still don't fully grok), but that led to more undefined variables and more failure:

$(".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;
});

I tried searching around and tried implementing several other techniques, including jQuery traversal (.parent(), .filter(), 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!

I know, it's so weird...you would think that the subsequent variable would work, but when I examine the POST data made from the second .ajax() call in Firebug, nothing gets posted at all and postData is an undefined variable in the second .ajax() success: callback. — bhall
– bhall, Commented Jun 16, 2011 at 17:01
As a hack, I was able to change the .ajax() settings by using: var postData = $(this).serializeArray(); $.ajaxSetup({ data : postData }); Then, all subsequent .ajax() calls use the data I specified in the .ajaxSetup(). But this is still a very imperfect solution, as I may need to pass different variables to the second .ajax() call. — bhall
– bhall, Commented Jun 16, 2011 at 17:02
This should not happen. You have an issue elsewhere. Look carefully through your code and use a debugger. — SLaks
– SLaks, Commented Jun 16, 2011 at 17:09

Mike Dinescu · Accepted Answer · 2011-06-16 17:19:04Z

Try this:

$(".myForm").submit(function () 
    {
        var postData=$(this).serializeArray();
        $.ajax({ type        : "POST",
                 async       : false,
                 cache       : false,
                 url         : "./insertComment.php",
                 data        : postData,
                 success: (function(pData) 
                   {
                      // capture the posted data in a closure
                      var _postData = pData;
                      return function() 
                             {                    
                               $.ajax({ type: "POST",
                                        async: false,
                                        cache: false,
                                        url: "./getComments.php",
                                        data: _postData,
                                        success: function(comments)
                                        {
                                            $(".Comments").html(comments);
                                        }
                                    });
                            }
                   })(postData)   // execute the outer function to produce the colsure
               });
      return false;
    });

bhall · Accepted Answer · 2011-06-17 02:34:05Z

Here's what I ended up doing:

$(".myForm").submit(function () {

    var postData = $(this).serializeArray(); // Gets all of the form elements
    var myID = $(this.ID).val(); // Takes only a single value from the form input named ID

    $.ajaxSetup({
        data        : "ID=" + myID // Sets the default data for all subsequent .ajax calls
    });

    $.ajax({
        type        : "POST",
        async       : false,
        cache       : false,
        url         : "./insertComment.php",
        data        : postData, // Overwrites the default form data for this one instance only, including all form elements
        success: function() {
            $.ajax({
               type         : "POST",
               async        : false,
               cache        : false,
               url          : "./loadComments.php", // Notice there is no data: field here as we are using the default as defined above
               success: function(comments) {
                   $(".Comments").html(comments);
               }
            });
        }
    });
    return false;
});

Collectives™ on Stack Overflow

JavaScript/jQuery Variable Scope Issue with Nested .ajax() calls

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related