Как захватить форму с помощью диалогового окна jQuery, а затем продолжить отправку - PullRequest
1 голос
/ 05 сентября 2011

У меня есть простая форма:

<form id="cancel" method="post" action="/Controller/Cancel">
   <input class="submitbtn" type="submit" value="Go">
   ...

Я использую jQuery с диалоговым окном jQuery UI. Что я хотел бы сделать, это перехватить отправку формы и отобразить диалоговое окно. Когда пользователь нажимает «Да» в диалоговом окне, форма продолжает и отправляет обычную страницу. Если они нажимают «Нет», диалог просто отменяется.

У меня есть этот код:

$(document).ready(function () {

$("#dialog").dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        "Yes": function () {
            // Not sure what to do here
            $(this).dialog("close");
        },
        "No": function () {
            $(this).dialog("close");
        }
    }
});

$('#cancel').submit(function (event) {
    event.preventDefault();
    $('#dialog').dialog('open');

});

}); 

У меня вопрос, как мне получить код отправки, чтобы возвращать истину / ложь клиенту на основе ответа из диалога.

Любая помощь приветствуется.

Ответы [ 2 ]

1 голос
/ 05 сентября 2011

Проблема здесь в том, что когда вы используете $('#cancel').submit() в обратном вызове кнопки «Да», событие submit запускается снова и event.preventDefault() останавливает фактическую отправку сообщения.

Быстрое решение проблемы - отменить привязку к событию отправки непосредственно перед отправкой формы. (Демо: http://jsfiddle.net/WQjFj/6/)

$("#dialog").dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        "Yes": function() {
            $('#cancel').unbind("submit").submit();
            $(this).dialog("close");
        },
        "No": function() {
            $(this).dialog("close");
        }
    }
});

В этом ответе можно найти другое решение: Использование диалогового окна jquery ui для подтверждения действия при отправке формы

0 голосов
/ 05 сентября 2011

Вы можете отправить форму прямо из диалога. Где у тебя // Не уверен что тут делать, поставь

$("#cancel").submit();

Вот руководство, которое вы, возможно, видели:

http://www.jensbits.com/2009/08/10/modal-confirmation-dialog-on-form-submit-javascript-jquery-ui-and-thickbox-varieties/

...