Поведение отправки формы по умолчанию после выполнения jQuery forms.js ajaxSubmit

Я использую плагин формы jQuery для привязки событий отправки для двух форм на одной странице, чтобы они отправлялись в отдельные сценарии PHP, которые возвращают разметку для отдельных элементов div на странице.

Одна форма обновляет другую. Я использую «живой», поэтому каждая форма имеет свои события, когда она обновляется:

$(document).ready(function() {
    /* Form 1 */
    $('#frmSearch').live('submit', function() {
        $(this).ajaxSubmit({
            target: '#divResults',
            url:    'search_div.php'
        });
        return false;
    });
    /* Form 2 */
    $('#frmResults').live('submit', function() {
        $(this).ajaxSubmit({
            target: '#divLookup',
            url:    'lookup_div.php',
        });
        return false;
    });
});

Все идет нормально. Каждую форму можно отправлять снова и снова с помощью ajax, и все привязки сохраняются от одной отправки к другой.

Проблема возникает, когда я пытаюсь связать третью форму и запустить ее событие отправки в опции «успех» второй формы:

/* Form 2 */
$('#frmResults').live('submit', function() {
    $(this).ajaxSubmit({
        target: '#divLookup',
        url:    'lookup_div.php',
        success: function(responseText){
            $('#frmLookup').submit();
        }
    });
    return false;
});
/* Form 3 */
$('#frmLookup').live('submit', function() {
    $(this).ajaxSubmit({
        target: '#divMappings',
        url:    'mapped_items_div.php',
    });
    return false;
});

Когда я это делаю, ajaxSubmit успешно выполняется, но затем также выполняется отправка формы по умолчанию, что приводит к перезагрузке страницы. Обратите внимание, что я включаю «return false»; чтобы подавить отправку формы по умолчанию, но по какой-то причине она все равно отправляется.

Я обнаружил, что если я «привязываюсь» к событию «отправить» формы 3 в функции успеха формы 2 с теми же параметрами, что и «живой» для формы 3, отправка формы по умолчанию не выполняется. Это излишне, однако, и если бы я мог, я хотел бы избежать этого.

Как я могу подавить стандартное поведение отправки формы 3?


plugins forms binding jquery jquery-plugins
person Keyslinger    schedule 22.03.2009    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Не уверен, что это связано с вашей проблемой, но live() не поддерживает событие "submit":

В настоящее время не поддерживается: blur, focus, mouseenter, mouseleave, change, submit

person Crescent Fresh    schedule 22.03.2009

arrow_upward
0
arrow_downward

Я знаю, что должно быть то же самое, но поскольку это кажется действительно странным поведением, я бы попробовал заменить

$('#frmLookup').submit();

для

$('#frmLookup').trigger('submit');

посмотреть, изменит ли это что-нибудь?

person Seb    schedule 22.03.2009

arrow_upward
0
arrow_downward

Спасибо, crescentfresh, за то, что направил меня на правильный путь. Для моего решения я изменил свои сценарии, чтобы печатать только элементы, вложенные в формы, а не сами формы и их содержимое. Затем я изменил «цель» каждой формы на следующую форму вместо div, содержащего следующую форму. Это устраняет необходимость повторной привязки события отправки для каждой формы, поскольку функция ajax из предыдущей формы просто заменяет ее внутренние элементы, а не «обновляет» ее полностью.

Я также решил, что уместно отказаться от плагина формы и просто использовать ".serialize()" вместе с ".ajax", как показано Паоло Бергантино здесь.

Мой конечный продукт выглядит примерно так:

/* Form 1 */
$('#frmSearch').bind('submit', function() {
    var formdata = $(this).serialize();
    $.ajax({
        url:    'result_form.php',
        data:   formdata,
        success: function(responseText){
            $('#frmResults').html(responseText);
        }
    });
    return false;
});

/* Form 2 */
$('#frmResults').bind('submit', function() {
    var formdata = $(this).serialize();
    $.ajax({
        url:    'lookup_div.php',
        data:   formdata,
        success: function(responseText){
            $('#frmLookup').html(responseText);
            $('#frmLookup').trigger('submit');
        }
    });
    return false;
});

/* Form 3 */
$('#frmLookup').bind('submit', function() {
    var formdata = $(this).serialize();
    $.ajax({
        url:    'mapped_items_div.php',
        data:   formdata,
        success: function(responseText){
            $('#divMappings').html(responseText);
        }
    });
    return false;
});
person Keyslinger    schedule 24.03.2009