JQuery AJAX формы отправить запрос с первого клика не работает

Question

Приветствую всех,

Я разрабатываю приложение с монорельсом + jquery и обнаружил проблему с ajax, работающим из jquery.

У меня есть форма, которая отправляет себя в контейнер div, обычно работает нормально, но время от времени форма не отправляется при первом щелчке, и мне нужно дать второй щелчок, чтобы получить ее работает

Я проверил это с помощью Firebug, и запрос остается обработанным, как показано на этом рисунке: http://www.freeimagehosting.net/uploads/c6f500d617.jpg

Если я снова нажму кнопку отправки, запрос будет обработан.

Код, который я использую, выглядит примерно так:

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

Как вы можете догадаться, существует div с именем service_plan_wizard_container, и это происходит с каждой формой с классом formSteps.

Привет

Answer 1

Я только что столкнулся с той же проблемой только сейчас. Я надеялся, что этот пост поможет мне, но ничто, что я нашел (что было мало), не поможет.

Я понял, почему, хотя.

Вставьте это где-нибудь в запрос ajax:

async: false,

Это полностью исправило вещь за одну секунду.

Кстати, я понял, что если вы включите это и в свой запрос ajax, вы можете получить сообщение об ошибке при первом же клике:

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

Причина, по которой я не получил ответа от сервера, не в том, что он не срабатывал, а в том, что он возвращал ошибку, а не "успех".

Кроме того, при отладке я настоятельно рекомендую использовать FireBug для Firefox, и вы можете отслеживать любые запросы Ajax на вкладке (Net-> XHR). Очень полезно!

Answer 2

Попробуйте добавить это в свой код:

context: this,

прямо над

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

и

var that = this;

под триггером отправки, затем используйте «тот»вместо (этого)