Почему я не могу вызвать кнопку отправки из диалогового окна JQuery UI?

Ответ 1

У меня была аналогичная проблема, когда я мог бы выполнить правильную кнопку отправки заявки, но форма просто не отправлялась. После перехода через код диалогового окна jquery и не найдя, как это могло бы предотвратить распространение события, я просто решил сделать очевидное и скрыть диалог перед отправкой. Также работает на вашей скрипке: http://jsfiddle.net/Q4GgZ/1/

jqueryDialog.dialog('close'); // <- THIS WORKS
$('#btnSubmitForm').click();

Ответ 2

У меня была та же проблема, и для меня работал следующий набор предложений.

• Добавить диалог в форму $(this).parent().appendTo("form:first");
• Добавить диалог в форму в диалоговом окне open

Кредит отправляется Homam и его comment на другой question.

См. ниже JavaScript

    var jqueryDialog = $('#divPopup')
        .dialog({
            autoOpen: false,
            modal: true,
            title: 'My Dialog',
            width: 300,
            height: 300,
            draggable: false,
            resizable: false,
            open: function() {
                $(this).parent().appendTo('form:first');
            }
        });

Ответ 3

Как отмечал LouD, исправление заключается в том, чтобы закрыть диалоговое окно перед нажатием на кнопку. Что касается почему, это что-то исправляет, вам нужно вставить исходный код JQuery. В версии 1.8.9 есть этот код для модального наложения:

events: c.map("focus,mousedown,mouseup,keydown,keypress,click".split(","), function (a) {
    return a + ".dialog-overlay"
}).join(" "),

...

c(document).bind(c.ui.dialog.overlay.events, function (d) {
    if (c(d.target).zIndex() < c.ui.dialog.overlay.maxZ) return false
})

Он возвращает false (в основном preventDefault()) для всех входных событий на элементах "под". Это не просто гигантский div, который мешает пользователю щелкать вещи, "перевернувшись" над ними. Он также вручную блокирует все входные события, независимо от того, создал ли пользователь или ваш JS.

Закрытие вашего модального диалога разрушает оверлей, что позволяет вашим событиям JS click полностью распространяться, отправив форму.

Ответ 4

Назначьте атрибут id вашей форме:

<form id="myForm" action="http://www.google.com/index.html" method="post">

затем отправьте форму:

$('.pickButton').click(function (e) {
  e.preventDefault();
  $('#myForm').submit();
  // more code
}

Ответ 5

Если кто-то все еще ищет ответ, вот что-то, что сработало для меня.

setTimeout ( "$ ('#" + id + "').click();", 0);

id - e.currentTarget.id, где событие - щелчок кнопки отправки. Передайте этот идентификатор методу, который должен вызвать событие click.

.trigger("click") не вызывает обратную передачу, но приведенный выше код делает.

Ответ 6

Я не вижу код для события Click кнопки отправки.

Вместо

$('#btnSubmitForm').click();

Попробуйте

$('form').submit();

Или отправьте форму в обработчик события клика вашей кнопки отправки.

Ответ 7

Нажимается кнопка отправки. Я добавил следующий код на ваш script...

$("#btnSubmitForm").on("click", function() {
    console.log("submit!");
});

и это показывает, что нажата кнопка.

Как сказал Сушант, используйте метод submit() формы или если вы хотите вызвать обратную передачу для asp.net, то посмотрите __doPostBack()

Как использовать __doPostBack()

Ответ 8

Это может быть ошибка, зависящая от вашей версии jQuery

посмотрите эту статью о той же проблеме

Во всех случаях, поскольку вы хотите отправить свою форму, самый короткий способ - использовать метод .submit().

Ответ 9

потому что он копирует Multiple oject. поэтому вы можете использовать: $('[id="btnCreate"]').last().trigger('submit');

последний метод получает последний элемент.

вы обновляете $('#btnSubmitForm').click();

попробуйте следующее: $('[id="btnSubmitForm"]').last().trigger('click');

$('[id="btnSubmitForm"]') получить все одинаковый идентификатор для btnSubmitForm.

например:

$("#dialog").dialog({
            autoOpen: false,
            //maxWidth: 600,
            //maxHeight: 500,
            minWidth: 580,
            width: 580,
            height: 500,
            title: "titleDemo",
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            },
            modal: true,
            buttons: {
                "Create": {
                    text: "OK",
                    id: "btnCreates",
                    click: function (event) {
                        $('[id="btnCreate"]').last().trigger('submit');
                    }
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

Ответ 10

Проблема возникает из-за использования элемента id в качестве селектора... Когда вызывается диалог jquery ui, он копирует в желаемый блок в сгенерированный контейнер, это означает, что определенные идентификаторы, такие как #form_name, теперь будут иметь путаные дубликаты селектор jquery...

Моим решением было бы перейти на идентификатор класса, а затем использовать более конкретный путь для выбора кнопки ex: $(jQuery_dialog_box. имя класса).submit() (или click())

Ответ 11

Диалоговое окно JQuery по умолчанию предотвращает отправку любых кнопок (по крайней мере, на мой опыт). С учетом сказанного, я понял, что если вы измените "отправить поведение" на любую кнопку "False" через Visual Studio, она будет работать. Я знаю, что это полностью противоположно тому, что должно быть, но если вы это сделаете, тогда кнопки внутри диалогового окна JQuery UI будут отправляться назад и работать.

Я также обнаружил через пару часов, что любые поля в диалоговом окне JQUI не распознаются в ASP.net после отправки, если вы не вызываете метод destroy в объекте диалога JQuery UI.

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

Ответ 12

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

Есть некоторые проблемы с этим кодом:

• Если диалог является модальным, кажется, что вы не можете запускать события для других элементов вне диалога. Если вы создадите диалог с опцией modal: false, триггер будет работать нормально. Я хочу, чтобы диалог был модальным, поэтому это решение не является вариантом.

• Поскольку диалог является модальным, вы должны поместить его в диалоговое окно. Вы можете скрыть его и запустить через ваши классифицированные кнопки. Я изменяю раздел javacript и пробовал на скрипке и работает для вашего дела.

HTML         

<form action="http://www.google.com/index.html" method="post">

    <input type="button" value="Open jQuery dialog" id="btnOpenDialog" />
    <br /><br /><br />

    The button below submits the form correctly if you click it.<br />
    However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted.
    </b><br />


    <input type="hidden" id="hdnEmployeeChosen" value="" />            

    <div id="divPopup" class="dialogClass" style="display: none;">
    Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not...
    <br /><br />

    <div class="divOptions">
        <input type="button" value="Pick" class="pickButton" employeeName="Weird Al" />
        Weird Al Yankovic
    </div>
    <div class="divOptions">            
        <input type="button" value="Pick" class="pickButton" employeeName="Dracula" />
        Count Dracula
    </div>
    <div class="divOptions">          
        <input type="button" value="Pick" class="pickButton" employeeName="David" />
        David Copperfield
    </div>     

       <input type="submit" value="Submit Form" id="btnSubmitForm" style="display:none"/>  
</div>

</form>    




</body>

JAVASCRIPT

$(document).ready(function ()
{
var jqueryDialog = $('#divPopup')
            .dialog({
                autoOpen: false,
                modal: true,
                title: 'My Dialog',
                width: 300,
                height: 300,
                draggable: false,
                resizable: false
            });

// This "fix" does not appear to help matters..........
jqueryDialog.parent().appendTo($("form:first"));

$('#btnOpenDialog').click(function () {
    jqueryDialog.dialog('open');    
});    

$('.pickButton').click(function () {

    // Put picked value into hidden field
    var pickedEmployee = $(this).attr('employeeName');
    $('#hdnEmployeeChosen').val(pickedEmployee);

    console.log("click button dialog");
    // Try to cause a submit (ASP.NET postback in my case)        
    // THIS PART DOES NOT WORK.................
    $('#btnSubmitForm')[0].click();

    console.log("after click");        
    //alert($('#hdnEmployeeChosen').val());
});    

});

Вы можете увидеть в скрипте здесь

Ответ 13

Простым решением этой проблемы является установка события отправки после, диалоговое окно открывается. Нет необходимости закрывать диалоговое окно перед тем, как будет отправлено событие отправки.

Когда диалог перекрывается во время метода .open(), все события отключены. Поэтому настройте нужные события после открытия диалогового окна.

$('#btnOpenDialog').click(function () {
        jqueryDialog.dialog('open');   
     // now setup events 
        $('#btnSubmitForm').on('click', function() {
            // process submit event 
        });
});