Діалогове вікно інтерфейсу jQuery з відтворенням кнопки ASP.NET

У мене діалог інтерфейсу jQuery чудово працює на моїй сторінці 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 id="dialog" style="text-align: left;display: none;">
    <asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" />
</div>

Але btnButton_Click ніколи не називається ... Як я можу це вирішити?

Додаткова інформація: Я додав цей код, щоб перемістити дів у форму:

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

Але все ж без успіху ...

Ви близькі до рішення, просто отримуєте неправильний об’єкт. Він повинен бути таким:

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"));
});

$('#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>

FWIW, форма: перша методика не працювала для мене.

Однак техніка в цій статті блогу зробила:

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

Зокрема, додавши це до діалогового оголошення:

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

Зауважте, що в інтерфейсі jQuery v1.10 є додаткові налаштування. Існує додаток Додано налаштування для вирішення способу вирішення ASP.NET, який ви використовуєте для повторного додавання елемента до форми.

Спробуйте:

$("#dialog").dialog({
     autoOpen: false,
     height: 280,
     width: 440,
     modal: true,
     **appendTo**:"form"
});

Відповідь Кена вище зробила трюк для мене. Проблема з прийнятою відповіддю полягає в тому, що вона працює лише в тому випадку, якщо у вас є один модуль на сторінці. Якщо у вас є кілька модалів, вам потрібно буде робити це в параметрі "відкритого" парама під час ініціалізації діалогового вікна, а не після факту.

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

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

В першу чергу це тому, що jQuery переміщує діалогове вікно поза тегами форми за допомогою DOM . Перемістіть її назад всередині тегів форми, і вона повинна добре працювати. Це можна побачити, ознайомившись з елементом у Firefox.

Мені не хотілося вирішувати цю проблему для кожного діалогу мого проекту, тому я створив простий плагін 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!

Щоб зрозуміти, цей плагін передбачає, що ви готові показати діалогове вікно, коли ви його зателефонуєте.

Я знаю, що це старе питання, але для тих, хто має цю проблему, є нове і простіше рішення: в jQuery UI 1.10.0 введено параметр "appendTo".

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

$("#dialog").dialog({
    appendTo: "form"
    ....
});

Фантастичний! Це вирішило мою проблему з ASP: подія кнопки не спрацьовує всередині jQuery модаля. Зауважте, використання модального інтерфейсу jQuery із наступним чином дозволяє активувати події кнопки:

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

Наступний рядок - це ключ до роботи цього!

$('#dialog').parent().appendTo($("form:first"))

Я тільки що додав наступний рядок після створення діалогового вікна:

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

Це було для мене найяснішим рішенням

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змінну на вашу.

За допомогою ASP.NET просто використовуйте UseSubmitBehavior="false"кнопку ASP.NET:

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

Довідка: Властивість Button.UseSubmitBehavior

Рішення Роберта Маклайна, що має найбільшу кількість голосів, є 99% правильним. Але єдине доповнення, яке могло б вимагати, як я це робило, - це коли що вам потрібно відкрити це діалогове вікно jQuery, не забудьте додати його до батьківського. Як і нижче:

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

Використовуйте цей рядок, щоб зробити цю роботу під час використання опції modal: true.

open: function (type, data) { 
    $('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form"); 
  },

$('#dialog').parent().appendTo($("form:first"))Рішення працює відмінно в IE 9. Але в IE 8 це робить діалог з'являється і зникає відразу. Цього ви не бачите, якщо не розмістите попередження, тож здається, що діалог ніколи не з’явиться. Я витрачаю один ранок на пошук рішення, яке працює в обох версіях, і єдине рішення, яке працює на обох версіях 8 і 9, це:

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

Сподіваємось, це допомагає іншим, хто бореться з тим же питанням

Перемістіть діалогове вікно правильним способом, але робити це потрібно лише на кнопці, що відкриває діалогове вікно. Ось додатковий код у зразку інтерфейсу користувача jQuery:

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

Додайте asp:buttonвсередину діалогового вікна, і воно працює добре.

Примітка. Ви повинні змінити кнопку <кнопка> на <тип вводу = кнопка>, щоб запобігти післязавантаженню після натискання кнопки "створити користувача".

Точне рішення;

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});