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

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

4 голосов
/ 22 марта 2009

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

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

$(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, и все привязки сохраняются от одной отправки к следующей.

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

/* 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 по умолчанию?

Ответы [ 3 ]

3 голосов
/ 22 марта 2009

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

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

0 голосов
/ 24 марта 2009

Спасибо, crescentfresh, за то, что вы выбрали меня на правильный путь. Для решения я изменил свои сценарии, чтобы печатать только элементы, вложенные в формы, а не сами формы и их содержимое. Затем я изменил «цель» каждой формы на следующую форму вместо div, содержащего следующую форму. Это устраняет необходимость повторной привязки события submit для каждой формы, поскольку функция 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;
});
0 голосов
/ 22 марта 2009

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

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

для 

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

чтобы увидеть, изменит ли это что-нибудь?

...