jquery .submit more than once?

Question

I have the following code:

$('.save').submit(function(e){
    var data = 'id=' + $(this).attr('name') + '&' + $(this).serialize();
    var messageBox = $(this).next('.message');
    messageBox.html('<div class="pending">Saving... please wait...</div>');
    $.post('save.php', data,
    function(response) {
        messageBox.html(response).delay(3000).fadeOut('slow');
    });
    e.preventDefault();
});

And it works great, however, when a user pushes "save" again, it seems like that $('.save').submit(); is not getting fired again.... I'm at least not seeing a pending or success message within messageBox.

What am I missing?

EDIT

I figured it out. When I fadeOut, I'm not fading out the error div, I'm fading out the entire messageBox div, and so once it's display:none, there's nothing bringing it back.

Answer 1

Most likely problem is that your AJAX isn't returning succesffully. Add a .error() function to it.

Example code from jquery docs:

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post("example.php", function() {
  alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });

http://api.jquery.com/jQuery.post/