Dialog UI jQuery dengan postback tombol ASP.NET

Saya memiliki Dialog jQuery UI yang bekerja dengan baik di halaman ASP.NET saya:

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 saya:

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

Tetapi btnButton_Click tidak pernah dipanggil ... Bagaimana saya bisa menyelesaikannya?

Informasi lebih lanjut: Saya menambahkan kode ini untuk memindahkan div ke formulir:

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

Tetapi masih belum berhasil ...

Anda dekat dengan solusinya, hanya mendapatkan objek yang salah. Seharusnya seperti ini:

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

Menggunakan kode ini memecahkan masalah saya dan berhasil di setiap browser, Internet Explorer 7, Firefox 3, dan Google Chrome. Saya mulai menyukai jQuery ... Ini kerangka yang keren.

Saya telah menguji dengan render parsial juga, persis apa yang saya cari. Bagus!

<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, bentuk: teknik pertama tidak berhasil untuk saya.

Namun, teknik dalam artikel blog itu:

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

Secara khusus, menambahkan ini ke deklarasi dialog:

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

Perlu diketahui bahwa ada pengaturan tambahan di jQuery UI v1.10. Ada pengaturan appendTo yang telah ditambahkan, untuk mengatasi solusi ASP.NET yang Anda gunakan untuk menambahkan kembali elemen ke formulir.

Mencoba:

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

Jawaban ken di atas membantu saya. Masalah dengan jawaban yang diterima adalah bahwa itu hanya berfungsi jika Anda memiliki modal tunggal pada halaman. Jika Anda memiliki banyak modals, Anda harus melakukannya sebaris di param "terbuka" sambil menginisialisasi dialog, bukan setelah faktanya.

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

Jika Anda melakukan apa yang jawaban pertama yang diterima memberi tahu Anda dengan banyak modals, Anda hanya akan mendapatkan modal terakhir pada halaman yang menjalankan postback dengan benar, tidak semuanya.

Terutama itu karena jQuery memindahkan dialog di luar tag formulir menggunakan DOM . Pindahkan kembali ke dalam tag formulir dan itu akan berfungsi dengan baik. Anda dapat melihat ini dengan memeriksa elemen di Firefox.

Saya tidak ingin harus mengatasi masalah ini untuk setiap dialog di proyek saya, jadi saya membuat plugin jQuery sederhana. Plugin ini hanya untuk membuka dialog baru dan menempatkannya dalam formulir 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>

Jadi untuk menggunakan plugin, Anda pertama-tama memuat jQuery UI dan kemudian plugin. Maka Anda dapat melakukan sesuatu seperti berikut:

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

Agar jelas, plugin ini mengasumsikan Anda siap untuk menampilkan dialog saat Anda menyebutnya.

Saya tahu ini adalah pertanyaan lama, tetapi bagi siapa pun yang memiliki masalah yang sama ada solusi yang lebih baru dan lebih sederhana: opsi "appendTo" telah diperkenalkan di jQuery UI 1.10.0

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

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

Fantastis! Ini memecahkan masalah saya dengan ASP: Acara tombol tidak menyala di dalam modal jQuery. Harap dicatat, menggunakan modal UI jQuery dengan yang berikut ini memungkinkan acara tombol diaktifkan:

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

Baris berikut adalah kunci untuk membuatnya bekerja!

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

Saya baru saja menambahkan baris berikut setelah Anda membuat dialog:

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

Ini solusi paling jelas untuk saya

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');

Semua konten di dalam dlg2akan tersedia untuk dimasukkan ke dalam basis data Anda. Jangan lupa untuk mengubah dialogvariabel agar sesuai dengan variabel Anda.

Dengan ASP.NET gunakan saja UseSubmitBehavior="false"tombol ASP.NET Anda:

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

Referensi: Button.UseSubmitBehavior Property

Solusi dari Robert MacLean dengan jumlah suara tertinggi adalah 99% benar. Tetapi satu-satunya tambahan yang mungkin diperlukan seseorang, seperti yang saya lakukan, adalah kapan pun Anda perlu membuka dialog jQuery ini, jangan lupa menambahkannya ke orang tua. Seperti di bawah ini:

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

Gunakan baris ini untuk membuat ini berfungsi saat menggunakan modal: opsi benar.

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

The $('#dialog').parent().appendTo($("form:first"))solusi bekerja dengan baik di IE 9. Tapi di IE 8 itu membuat dialog muncul dan menghilang secara langsung. Anda tidak dapat melihat ini kecuali jika Anda menempatkan beberapa peringatan sehingga tampaknya dialog tidak pernah muncul. Saya menghabiskan satu pagi menemukan solusi yang berfungsi pada kedua versi dan satu-satunya solusi yang bekerja pada kedua versi 8 dan 9 adalah:

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

Semoga ini bisa membantu orang lain yang bergulat dengan masalah yang sama

Gerakkan dialog dengan cara yang benar, tetapi Anda harus melakukannya hanya di tombol membuka dialog. Berikut adalah beberapa kode tambahan dalam sampel jQuery UI:

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

Tambahkan asp:buttonbagian dalam dialog Anda, dan itu berjalan dengan baik.

Catatan: Anda harus mengubah <button> menjadi <input type = button> untuk mencegah postback setelah Anda mengklik tombol "buat pengguna".

Solusi yang tepat adalah;

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