jquery ajax form submit request with first click is not working

Greeting to all,

I'm developing an app with monorail + jquery, and i've found a problem with the ajax working from jquery.

I've a form that submits it-self into a div container, usually works fine, but every once in a while the form doesn't submits on the first click, and i need to give a second click to get it working

I've checked it out with Firebug and the request remains processing as is shown in this image: http://www.freeimagehosting.net/uploads/c6f500d617.jpg

If i press the submit button again, then the request is processed.

The code i'm using is pretty much this:

    $('.formSteps').submit(function () { // catch the form's submit ev开发者_如何学JAVAent
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function (response) { // on success..
            $('#service_plan_wizard_container').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});

As you may guess, there is a div called service_plan_wizard_container and this happens with every form with the class formSteps.

Regards

Try adding this to your code:

context: this,

right above

data: $(this).serialize(), // get the form data

and

var that = this;

below the submit trigger, then use "that" instead of (this)

I just ran into the same issue just now. I was hoping that this post would help me out, but nothing I found (which was little) would help.

I have figured out why though.

Insert this somewhere in the ajax request:

async: false,

This completely fixed the thing in one second.

By the way, I realized if you put this into your ajax request as well, you can actually get an error message on that first click:

error: function(er, err, error){
      alert(error);
},

The reason I was getting no response from the server is not because it wasn't firing, it's because it was returning an error instead of a "success" response.

Also, when debugging this, I greatly recommend using FireBug for Firefox and you can monitor any Ajax requests in the (Net->XHR) tab. Very helpful!