Диалог jQuery UI с обратной передачей кнопки ASP.NET

295

У меня есть JQuery UI Dialog отлично работает на моей странице ASP.NET:

jQuery(function() {
    jQuery("#dialog").dialog({
        draggable: true,
        resizable: true,
        show: 'Transfer',
        hide: 'Transfer',
        width: 320,
        autoOpen: false,
        minHeight: 10,
        minwidth: 10
    });
});

jQuery(document).ready(function() {
    jQuery("#button_id").click(function(e) {
        jQuery('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]);
        jQuery('#dialog').dialog('open');
    });
});

Мой div:

<div id="dialog" style="text-align: left;display: none;">
    <asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" />
</div>

Но btnButton_Click никогда не вызывается ... Как я могу решить это?

Дополнительная информация: я добавил этот код для перемещения div в форму:

jQuery("#dialog").parent().appendTo(jQuery("form:first"));

Но все же безуспешно ...

Павел
источник
LOL ... сначала я думал, что ты украл мой вопрос, но потом я увидел, что ты спросил сначала. Я задавал тот же вопрос для FancyBox - stackoverflow.com/questions/2686362/…
nikib3ro
1
Есть лучший ответ, чем явный вызов appendTo (). Проверьте это stackoverflow.com/a/20589833/2487549
Навсегда

Ответы:

314

Вы близки к решению, просто получаете не тот объект. Должно быть так:

jQuery(function() {
    var dlg = jQuery("#dialog").dialog({
                         draggable: true,
                         resizable: true,
                         show: 'Transfer',
                         hide: 'Transfer',
                         width: 320,
                         autoOpen: false,
                         minHeight: 10,
                         minwidth: 10
                     });
    dlg.parent().appendTo(jQuery("form:first"));
});
Роберт Маклин
источник
Что делать, если для него установлена ​​модальная опция true? в моем случае решение является идеальным, но без модального - с модальным, div, созданный для модального эффекта, помещается поверх диалога с помощью метода parent ()
SammuelMiranda
37
$('#divname').parent().appendTo($("form:first"));

Использование этого кода решило мою проблему, и оно работало во всех браузерах, Internet Explorer 7, Firefox 3 и Google Chrome. Я начинаю любить JQuery ... Это крутой фреймворк.

Я также проверил с частичным рендером, именно то, что я искал. Большой!

<script type="text/javascript">
    function openModalDiv(divname) {
        $('#' + divname).dialog({ autoOpen: false, bgiframe: true, modal: true });
        $('#' + divname).dialog('open');
        $('#' + divname).parent().appendTo($("form:first"));
    }

    function closeModalDiv(divname) {
        $('#' + divname).dialog('close');
    }
</script>
...
...
<input id="Button1" type="button" value="Open 1" onclick="javascript:openModalDiv('Div1');" />
...
...
<div id="Div1" title="Basic dialog" >
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
          postback test<br />
          <asp:Button ID="but_OK" runat="server" Text="Send request" /><br />
          <asp:TextBox ID="tb_send" runat="server"></asp:TextBox><br />
          <asp:Label ID="lbl_result" runat="server" Text="prova" BackColor="#ff0000></asp:Label>
        </ContentTemplate>
    <asp:UpdatePanel>
    <input id="Button2" type="button" value="cancel" onclick="javascript:closeModalDiv('Div1');" />
</div>
Marco
источник
Этот полный пример помог мне собрать воедино то, чего мне не хватало при столкновении с этой проблемой. Спасибо!
Дилли-О
34

FWIW, форма: первая техника не работает для меня.

Тем не менее, техника в этой статье блога сделала:

http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

В частности, добавив это в объявление диалога:

  open: function(type,data) {
    $(this).parent().appendTo("form");
  }
кругозор
источник
1
если вы не сделаете это на панели обновления, этот метод - единственный способ заставить мои кнопки (которые я хочу сделать полный постбэк) работать.
Мерритт
+1 для этого это единственный код, который работал для меня. Я не использую панель обновления. СПАСИБО!!! спас мой день!
Альберт Лор
+1: это работало для меня, когда вышеприведенные решения не работали. И я использую UpdatePanel.
Река Вивиан
Самое простое и лучшее решение вернуть диалоговое окно обратно в форму для поведения PostBack.
GoldBishop
28

Имейте в виду, что в jQuery UI v1.10 есть дополнительная настройка. Был добавлен параметр appendTo для решения обходного пути ASP.NET, который вы используете для повторного добавления элемента в форму.

Пытаться:

$("#dialog").dialog({
     autoOpen: false,
     height: 280,
     width: 440,
     modal: true,
     **appendTo**:"form"
});
Майк
источник
Это не работает для меня с 2 jquery диалогами на одной странице. Я хотел бы, чтобы это было как правильное решение.
Мэтью Лок
3
Методы parent (). AppendTo ("form") не работали с модальным диалогом, потому что div оверлея остается вне формы и в конечном итоге закрывает диалог (делая его неработоспособным). Используя это новое свойство appendTo с jquery 1.10, div наложения был помещен в нужное место, поэтому модальное диалоговое окно работало правильно.
Хумбадс
Теперь это должен быть правильный ответ, потому что библиотека пользовательского интерфейса jquery была обновлена, чтобы добавить параметр appendTo. Спасибо @Mike сэкономил мне много времени.
AJP
24

кен ответ «s выше сделал трюк для меня. Проблема с принятым ответом состоит в том, что он работает, только если у вас есть один модал на странице. Если у вас есть несколько модальностей, вам нужно сделать это встроенным в параметре «open» при инициализации диалога, а не по факту.

open: function(type,data) { $(this).parent().appendTo("form"); }

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

nickb
источник
1
+1 Абсолютно верно. Исправил мою проблему для меня. Но зачем это нужно? Я не могу понять это.
Колин
21

Прежде всего потому, что jQuery перемещает диалог за пределы тегов формы с помощью DOM . Переместите его обратно в теги формы, и оно должно работать нормально. Вы можете убедиться в этом, проверив элемент в Firefox.

Чад Рупперт
источник
Я переместил его внутрь формы: jQuery ("# ​​dialog"). Parent (). AppendTo (jQuery ("form: first")); Но проблема все еще там ...
Пол
Вы не регистрируете какие-либо другие события jquery для объекта btnButton?
Чад Рупперт
и когда ты возвращаешь его обратно в форму? сразу после открытия?
Чад Рупперт
jQuery (function () {jQuery ("# ​​dialog"). dialog ({draggable: true, изменяемый размер: true, показать: 'Transfer', скрыть: 'Transfer', ширина: 320, autoOpen: false, minHeight: 10, minwidth : 10}); jQuery ("# ​​dialog"). Parent (). AppendTo (jQuery ("form: first"));}); это то, что должно быть.
Чад Рупперт
и до сих пор нет радости? по крайней мере, когда вы нажимаете кнопку, если в форме, это должно вызвать сообщение. Вы получаете ошибки JS вообще? Модал не закрывается или что-нибудь?
Чад Рупперт
8

Я не хотел обходить эту проблему для каждого диалога в моем проекте, поэтому я создал простой плагин jQuery. Этот плагин предназначен только для открытия новых диалогов и помещения их в форму ASP.NET :

(function($) {
    /**
     * This is a simple jQuery plugin that works with the jQuery UI
     * dialog. This plugin makes the jQuery UI dialog append to the
     * first form on the page (i.e. the asp.net form) so that
     * forms in the dialog will post back to the server.
     *
     * This plugin is merely used to open dialogs. Use the normal
     * $.fn.dialog() function to close dialogs programatically.
     */
    $.fn.aspdialog = function() {
        if (typeof $.fn.dialog !== "function")
            return;

        var dlg = {};

        if ( (arguments.length == 0)
                || (arguments[0] instanceof String) ) {
            // If we just want to open it without any options
            // we do it this way.
            dlg = this.dialog({ "autoOpen": false });
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
        else {
            var options = arguments[0];
            options.autoOpen = false;
            options.bgiframe = true;

            dlg = this.dialog(options);
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
    };
})(jQuery);</code></pre>

Таким образом, чтобы использовать плагин, вы сначала загружаете пользовательский интерфейс jQuery, а затем плагин. Затем вы можете сделать что-то вроде следующего:

$('#myDialog1').aspdialog(); // Simple
$('#myDialog2').aspdialog('open'); // The same thing
$('#myDialog3').aspdialog({title: "My Dialog", width: 320, height: 240}); // With options!

Чтобы быть понятным, этот плагин предполагает, что вы готовы показать диалоговое окно, когда вы его вызываете.

Джеймс Самнерс
источник
8

Я знаю, что это старый вопрос, но для тех, у кого такая же проблема, есть более новое и более простое решение: в jQuery UI 1.10.0 была введена опция "appendTo"

http://api.jqueryui.com/dialog/#option-appendTo

$("#dialog").dialog({
    appendTo: "form"
    ....
});
Джечо Йеков
источник
может быть слишком рано для модального диалога
Вольфганг Фаль
Работая очаровательно
mzonerz
7

Фантастика! Это решило мою проблему с ASP: событие Button не запускалось внутри модального jQuery. Обратите внимание: использование модального интерфейса jQuery со следующим разрешает запуск события кнопки:

// Dialog Link
$('#dialog_link').click(function () {
    $('#dialog').dialog('open');
    $('#dialog').parent().appendTo($("form:first"))
    return false;
});

Следующая строка является ключом, чтобы это заработало!

$('#dialog').parent().appendTo($("form:first"))
Марк Хоулдридж
источник
3

Я просто добавил следующую строку после того, как вы создали диалог:

$(".ui-dialog").prependTo("form");
Буден Ньере
источник
3

Это было самое ясное решение для меня

var dlg2 = $('#dialog2').dialog({
        position: "center",
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

dlg2.parent().appendTo('form:first');
$('#dialog_link2').click(function(){
    dlg2.dialog('open');

Весь контент внутри dlg2будет доступен для вставки в вашу базу данных. Не забудьте изменить dialogпеременную, чтобы она соответствовала вашей.

Маттеус
источник
3

С ASP.NET просто используйте UseSubmitBehavior="false"в вашей кнопке ASP.NET:

<asp:Button ID="btnButton" runat="server"  Text="Button" onclick="btnButton_Click" UseSubmitBehavior="false" />       

Ссылка: свойство Button.UseSubmitBehavior

Гильерме де Хесус Сантос
источник
1

Решение от Роберта Маклина с наибольшим количеством голосов правильное на 99%. Но единственное дополнение, которое может потребоваться, как и я, это когда вам нужно открыть это диалоговое окно jQuery, не забудьте добавить его к родителю. Как ниже:

var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));

Яхья
источник
как указано в моем ответе выше 2 года назад, но все равно спасибо!
Майк
1

Используйте эту строку, чтобы заставить это работать, используя опцию modal: true.

open: function (type, data) { 
    $('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form"); 
  },
Shaoden
источник
1

$('#dialog').parent().appendTo($("form:first"))Решение работает отлично в IE 9. Но в IE 8 это делает диалог появляется и исчезает сразу. Вы не сможете увидеть это, если не разместите несколько предупреждений, поэтому кажется, что диалог никогда не появляется. Я провожу одно утро в поисках решения, которое работает на обеих версиях, и единственное решение, которое работает на обеих версиях 8 и 9:

$(".ui-dialog").prependTo("form");

Надеюсь, что это помогает другим, которые борются с той же проблемой

Moorlang
источник
3
Я считаю, что вы можете просто установить UseSubmitBehaviorсвойство Button на falseзначение. Таким образом , вам не нужны appendили prependзвонки.
Юрий Рожовецкий,
1

Переместите диалоговое окно в правильном направлении, но вы должны сделать это только с помощью кнопки, открывающей диалоговое окно. Вот некоторый дополнительный код в примере jQuery UI:

$('#create-user').click(function() {
    $("#dialog").parent().appendTo($("form:first"))
    $('#dialog').dialog('open');
})

Добавьте свой asp:buttonвнутри диалога, и он работает хорошо.

Примечание: вы должны изменить <button> на <input type = button>, чтобы предотвратить обратную передачу после того, как вы нажмете кнопку «создать пользователя».

Питер Мортенсен
источник
0

Точное решение есть;

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});
Мехмет Инс
источник