jquery ajax form submit request with first click is not working

Question

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 event
    $.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

benhowdle89 benhowdle89 · Accepted Answer · 2011-01-20T09:45:51

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)

jquery ajax form submit request with first click is not working

2 Answers