ไดอะล็อก jQuery UI พร้อม postback ปุ่ม 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"));

แต่ก็ยังไม่ประสบความสำเร็จ ...


ฮ่า ๆ ... ตอนแรกฉันคิดว่าคุณขโมยคำถามของฉัน แต่แล้วฉันเห็นคุณถามก่อน ฉันถามคำถามเดียวกันกับ FancyBox - stackoverflow.com/questions/2686362/…
nikib3ro

1
มีคำตอบที่ดีกว่าการเรียก appendTo () อย่างชัดเจน ตรวจสอบstackoverflow.com/a/20589833/2487549
Foreever

คำตอบ:


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

เกิดอะไรขึ้นถ้ามีตัวเลือก modal ตั้งค่าเป็นจริง ในกรณีของฉันการแก้ปัญหานั้นสมบูรณ์แบบ แต่หากไม่มี modal - ด้วย modal div ที่สร้างขึ้นสำหรับเอฟเฟกต์แบบโมเดอเรเตอร์จะถูกวางไว้เหนือกล่องโต้ตอบกับ parent () method
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>

ตัวอย่างเต็มรูปแบบนี้ช่วยให้ฉันปะติดปะต่อสิ่งที่ฉันหายไปเมื่อพบปัญหานี้ ขอบคุณ!
Dillie-O

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
หากคุณไม่ทำในแผงอัปเดตวิธีนี้เป็นวิธีเดียวที่ฉันจะได้รับปุ่มของฉัน (ซึ่งฉันต้องการทำ postback แบบเต็ม) ให้ทำงาน
Merritt

+1 สำหรับนี่คือรหัสเดียวที่ทำงานสำหรับฉัน ฉันไม่ได้ใช้แผงอัปเดต ขอบคุณ!!! บันทึกวันของฉัน!
อัลเบิร์ต Laure

+1: สิ่งนี้ใช้ได้กับฉันเมื่อโซลูชันด้านบนไม่ทำงาน และฉันใช้ UpdatePanel
Vivian River

ทางออกที่ง่ายที่สุดและดีที่สุดในการทำให้กล่องโต้ตอบกลับมาเป็นพฤติกรรมแบบ PostBack
GoldBishop

28

โปรดทราบว่ามีการตั้งค่าเพิ่มเติมใน jQuery UI v1.10 มีการตั้งค่าappendToที่เพิ่มเข้ามาเพื่อแก้ไขวิธีการแก้ปัญหาASP.NET ที่คุณใช้เพื่อเพิ่มองค์ประกอบลงในฟอร์มอีกครั้ง

ลอง:

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

สิ่งนี้ใช้ไม่ได้กับฉันด้วยข้อความโต้ตอบ 2 jquery ในหน้าเดียวกัน ฉันหวังว่ามันจะเป็นทางออกที่เหมาะสม
Matthew Lock

3
เทคนิค parent (). appendTo ("form") ไม่สามารถใช้งานไดอะล็อก modal ได้เพราะ div โอเวอร์เลย์ยังคงอยู่นอกฟอร์มและจบลงที่การสนทนา (แสดงผลไม่ได้) ด้วยการใช้คุณสมบัติ appendTo ใหม่นี้ด้วย jquery 1.10 div การวางซ้อนถูกวางในตำแหน่งที่ถูกต้องดังนั้นไดอะล็อก modal จึงทำงานได้อย่างถูกต้อง
humbads

นี่ควรเป็นคำตอบที่ถูกต้องในตอนนี้เพราะไลบรารี่ UI ของ jquery ได้รับการอัพเดตเพื่อเพิ่มการตั้งค่า appendTo ขอบคุณ @ ไมค์ช่วยฉันได้เยอะ
AJP

24

คำตอบของเคนได้ทำเพื่อฉัน ปัญหาของคำตอบที่ยอมรับก็คือมันจะทำงานได้ก็ต่อเมื่อคุณมี modal เดียวในหน้า หากคุณมีโมเดอเรเตอร์หลายตัวคุณจะต้องทำแบบอินไลน์ใน param "open" ในขณะที่กำลังเริ่มต้นไดอะล็อกไม่ใช่ตามความเป็นจริง

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

หากคุณทำในสิ่งที่คำตอบแรกที่ได้รับการยอมรับบอกคุณด้วยการปรับหลายครั้งคุณจะได้รับการปรับเปลี่ยนครั้งล่าสุดบนหน้าเว็บที่ทำการโพสต์ข้อความอย่างถูกต้องไม่ใช่ทั้งหมด


1
+1 จริงแน่นอน แก้ไขปัญหาให้ฉัน แต่ทำไมถึงจำเป็น? ฉันไม่สามารถเข้าใจได้
โคลิน

21

ส่วนใหญ่จะเป็นเพราะ jQuery ย้ายนอกโต้ตอบของแท็กรูปแบบโดยใช้DOM ย้ายกลับเข้าไปข้างในแท็กฟอร์มและควรจะทำงานได้ดี คุณสามารถดูสิ่งนี้ได้โดยตรวจสอบองค์ประกอบใน Firefox


ฉันย้ายไปไว้ในรูปแบบ: jQuery ("# ​​dialog"). parent (). appendTo (jQuery ("form: first")); แต่ปัญหายังคงมี ...
พอล

คุณไม่ได้ลงทะเบียนเหตุการณ์ jquery อื่น ๆ บนวัตถุ btnButton ใช่หรือไม่
Chad Ruppert

และเมื่อไหร่ที่คุณจะนำมันกลับมาในรูปแบบ? ทันทีหลังจากเปิด?
Chad Ruppert

jQuery (function () {jQuery ("# ​​dialog"). dialog ({draggable: true, ปรับขนาดได้: true, แสดง: 'Transfer', ซ่อน: 'Transfer', ความกว้าง: 320, autoOpen: false, minHeight: 10, ความกว้าง : 10}); jQuery ("# ​​dialog"). parent (). appendTo (jQuery ("form: first"));}); เป็นสิ่งที่ควรจะเป็น
Chad Ruppert

และยังไม่มีความสุข? อย่างน้อยที่สุดเมื่อคุณคลิกปุ่มถ้าอยู่ในรูปแบบก็ควรทำให้เกิดการโพสต์ คุณได้รับข้อผิดพลาด JS เลยหรือไม่? กิริยาไม่ได้ปิดหรืออะไร?
Chad Ruppert

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 UI ก่อนแล้วจึงค่อยใช้ปลั๊กอิน จากนั้นคุณสามารถทำสิ่งต่อไปนี้:

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

ปลั๊กอินนี้จะถือว่าคุณพร้อมที่จะแสดงกล่องโต้ตอบเมื่อคุณเรียกใช้


8

ฉันรู้ว่านี่เป็นคำถามเก่า แต่สำหรับทุกคนที่มีปัญหาเดียวกันมีวิธีแก้ปัญหาที่ใหม่กว่าและง่ายกว่า: มีการแนะนำตัวเลือก "appendTo" ใน jQuery UI 1.10.0

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

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

อาจเร็วเกินไปสำหรับการสนทนาเป็นกิริยาช่วย
Wolfgang Fahl

ทำงานอย่างมีเสน่ห์
mzonerz

7

Fantastic! วิธีนี้ช่วยแก้ไขปัญหาของฉันกับ ASP: เหตุการณ์ปุ่มไม่เริ่มทำงานใน jQuery modal โปรดทราบว่าการใช้โมดอล jQuery UI ดังต่อไปนี้อนุญาตให้เหตุการณ์ปุ่มเริ่มทำงาน:

// 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ตัวแปรให้เหมาะกับคุณ



1

วิธีการแก้ปัญหาจาก Robert Maclean ที่มีจำนวนโหวตมากที่สุดคือถูกต้อง 99% แต่การเพิ่มคนเดียวเท่านั้นที่ฉันอาจต้องการคือเมื่อใดก็ตามที่คุณต้องการเปิดกล่องโต้ตอบ jQuery นี้อย่าลืมผนวกเข้ากับพาเรนต์ ชอบด้านล่าง:

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


ตามที่ระบุไว้ในคำตอบของฉันไป 2 ปีที่แล้ว แต่ขอบคุณ!
Mike

1

ใช้บรรทัดนี้เพื่อใช้งานในขณะที่ใช้ตัวเลือก modal: true

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

1

การ$('#dialog').parent().appendTo($("form:first"))แก้ปัญหาทำงานได้ดีใน IE 9 แต่ใน IE 8 มันทำให้กล่องโต้ตอบปรากฏขึ้นและหายไปโดยตรง คุณไม่สามารถเห็นสิ่งนี้ได้เว้นแต่ว่าคุณจะวางการแจ้งเตือนบางอย่างดังนั้นดูเหมือนว่ากล่องโต้ตอบจะไม่ปรากฏขึ้น ฉันใช้เวลาหนึ่งวันในการหาโซลูชันที่ใช้งานได้ทั้งสองเวอร์ชันและทางออกเดียวที่ใช้ได้กับทั้งเวอร์ชัน 8 และ 9 คือ:

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

หวังว่านี่จะช่วยผู้อื่นที่กำลังดิ้นรนกับปัญหาเดียวกัน


3
ฉันเชื่อว่าคุณสามารถตั้งค่าUseSubmitBehaviorคุณสมบัติของปุ่มเป็นfalseค่าได้ ด้วยวิธีนี้คุณไม่จำเป็นต้องมีappendหรือprependโทร
Yuriy Rozhovetskiy

1

ย้ายกล่องโต้ตอบอย่างถูกวิธี แต่คุณควรทำในปุ่มเปิดกล่องโต้ตอบเท่านั้น นี่คือรหัสเพิ่มเติมในตัวอย่าง jQuery UI:

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

เพิ่มของคุณ asp:buttonภายในกล่องโต้ตอบและมันทำงานได้ดี

หมายเหตุ: คุณควรเปลี่ยน <button> เป็น <input type = button> เพื่อป้องกัน postback หลังจากคุณคลิกปุ่ม "create user"


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.