Hộp thoại UI UI với postback nút ASP.NET

Tôi có một hộp thoại UI UI hoạt động tốt trên trang ASP.NET của mình:

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 của tôi

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

Nhưng btnButton_Click không bao giờ được gọi ... Làm thế nào tôi có thể giải quyết điều đó?

Thông tin thêm: Tôi đã thêm mã này để di chuyển div sang mẫu:

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

Nhưng vẫn không thành công ...

Bạn đang ở gần giải pháp, chỉ cần nhận sai đối tượng. Nó nên như thế này:

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

Sử dụng mã này đã giải quyết vấn đề của tôi và nó hoạt động trong mọi trình duyệt, Internet Explorer 7, Firefox 3 và Google Chrome. Tôi bắt đầu yêu jQuery ... Đó là một khung công tác tuyệt vời.

Tôi cũng đã thử nghiệm với kết xuất một phần, chính xác những gì tôi đang tìm kiếm. Tuyệt quá!

<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, hình thức: kỹ thuật đầu tiên không hiệu quả với tôi.

Tuy nhiên, kỹ thuật trong bài viết blog đó đã làm:

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

Cụ thể, thêm phần này vào khai báo hộp thoại:

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

Xin lưu ý rằng có một cài đặt bổ sung trong jQuery UI v1.10. Có một cài đặt appendTo đã được thêm vào, để giải quyết ASP.NET giải quyết cách giải quyết mà bạn đang sử dụng để thêm lại phần tử vào biểu mẫu.

Thử:

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

Câu trả lời của ken ở trên đã lừa tôi. Vấn đề với câu trả lời được chấp nhận là nó chỉ hoạt động nếu bạn có một phương thức duy nhất trên trang. Nếu bạn có nhiều phương thức, bạn sẽ cần thực hiện nội tuyến trong thông số "mở" trong khi khởi tạo hộp thoại, không phải sau thực tế.

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

Nếu bạn thực hiện những gì câu trả lời được chấp nhận đầu tiên cho bạn biết với nhiều phương thức, bạn sẽ chỉ nhận được phương thức cuối cùng trên trang làm việc sau khi bắn đúng cách, chứ không phải tất cả chúng.

Chủ yếu là vì jQuery di chuyển hộp thoại bên ngoài các thẻ biểu mẫu bằng cách sử dụng DOM . Di chuyển nó trở lại bên trong các thẻ mẫu và nó sẽ hoạt động tốt. Bạn có thể thấy điều này bằng cách kiểm tra phần tử trong Firefox.

Tôi không muốn phải giải quyết vấn đề này cho mọi hộp thoại trong dự án của mình, vì vậy tôi đã tạo một plugin jQuery đơn giản. Plugin này chỉ đơn thuần để mở các hộp thoại mới và đặt chúng trong biểu mẫu 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>

Vì vậy, để sử dụng plugin, trước tiên bạn tải jQuery UI và sau đó là plugin. Sau đó, bạn có thể làm một cái gì đó như sau:

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

Để rõ ràng, plugin này giả định rằng bạn đã sẵn sàng để hiển thị hộp thoại khi bạn gọi nó.

Tôi biết đây là một câu hỏi cũ, nhưng đối với bất kỳ ai có cùng vấn đề thì có một giải pháp mới hơn và đơn giản hơn: tùy chọn "appendTo" đã được giới thiệu trong jQuery UI 1.10.0

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

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

Tuyệt diệu! Điều này đã giải quyết vấn đề của tôi với sự kiện ASP: Nút không kích hoạt bên trong phương thức jQuery. Xin lưu ý, sử dụng phương thức UI UI với điều sau đây cho phép sự kiện nút phát ra:

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

Dòng sau đây là chìa khóa để làm việc này!

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

Tôi chỉ thêm dòng sau khi bạn tạo hộp thoại:

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

Đây là giải pháp rõ ràng nhất cho tôi

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

Tất cả nội dung bên trong dlg2sẽ có sẵn để chèn vào cơ sở dữ liệu của bạn. Đừng quên thay đổi dialogbiến để khớp với biến của bạn.

Với ASP.NET chỉ cần sử dụng UseSubmitBehavior="false"trong nút ASP.NET của bạn:

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

Tham khảo: Nút.UseSubmitBehavior Thuộc tính

Giải pháp từ Robert MacLean với số phiếu bầu cao nhất là chính xác 99%. Nhưng sự bổ sung duy nhất mà ai đó có thể yêu cầu, như tôi đã làm, là bất cứ khi nào bạn cần mở hộp thoại jQuery này, đừng quên nối nó với cha mẹ. Giống như dưới đây:

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

Sử dụng dòng này để thực hiện công việc này trong khi sử dụng tùy chọn modal: true.

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

Các $('#dialog').parent().appendTo($("form:first"))giải pháp hoạt động tốt trong IE 9. Nhưng trong IE 8 nó làm cho hộp thoại xuất hiện và biến mất cách trực tiếp. Bạn không thể thấy điều này trừ khi bạn đặt một số cảnh báo để có vẻ như hộp thoại không bao giờ xuất hiện. Tôi dành một buổi sáng để tìm một giải pháp hoạt động trên cả hai phiên bản và giải pháp duy nhất hoạt động trên cả hai phiên bản 8 và 9 là:

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

Hy vọng điều này sẽ giúp những người khác đang đấu tranh với cùng một vấn đề

Di chuyển hộp thoại đúng cách, nhưng bạn chỉ nên thực hiện trong nút mở hộp thoại. Đây là một số mã bổ sung trong mẫu UI UI:

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

Thêm asp:buttonbên trong hộp thoại của bạn , và nó chạy tốt.

Lưu ý: bạn nên thay đổi <button> thành <input type = button> để ngăn postback sau khi bạn nhấp vào nút "tạo người dùng".

Giải pháp chính xác là;

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