带ASP.NET按钮回发的jQuery UI对话框


295

我的jQuery UI对话框在我的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

Answers:


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>

这个完整的示例帮助我拼凑了遇到此问题时缺少的内容。谢谢!
Dillie-O 2011年

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
如果您未在更新面板中执行此操作,则此方法是我可以使按钮(我想执行完整回发)的唯一方法。
Merritt 2010年

+1,这是为我工作的唯一代码。即时通讯不使用更新面板。谢谢!!!拯救了我的一天!
艾伯特·劳尔

+1:当上述解决方案不起作用时,这对我有用。我正在使用UpdatePanel。
维维安河

最简单,最佳的解决方案,将“对话框”重新放回“窗体以进行回发”行为。
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”)技术不适用于模态对话框,因为overlay div停留在窗体外部,并最终覆盖了对话框(使其无法使用)。通过将这个新的appendTo属性与jquery 1.10一起使用,将overlay div放置在正确的位置,因此模式对话框可以正常工作。
汉巴德(Humbads)2014年

现在这应该是正确的答案,因为jquery UI库已更新为添加appendTo设置。谢谢@麦克节省了我很多时间。
AJP

24

ken上面的答案对我有用。可接受答案的问题在于,仅当页面上有单个模式时,它才有效。如果您有多个模态,则需要在初始化对话框时在“ open”参数中内联完成此操作,而不是事后。

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

如果执行第一个被接受的答案告诉您的是多个模式,那么您只会在页面上的最后一个模式正确触发回发,而不能全部触发。


1
+1绝对正确。为我解决了我的问题。但是为什么有必要呢?我不知道。
科林

21

主要是因为jQuery使用DOM将对话框移到了表单标签之外。将其移回表单标签内,它应该可以正常工作。您可以通过检查Firefox中的元素来查看。


我将其移动到以下表单中:jQuery(“#dialog”)。parent()。appendTo(jQuery(“ form:first”))); 但是问题仍然存在...
Paul

您没有在btnButton对象上注册任何其他jquery事件吗?
乍得·鲁伯特

您什么时候将其放回表格中?打开后马上?
乍得·鲁伯特

jQuery(function(){jQuery(“#dialog”)。dialog({可拖动: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 UI,然后再加载该插件。然后,您可以执行以下操作:

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

明确地说,此插件假定您已准备好在调用对话框时显示该对话框。



7

太棒了!这解决了我的ASP:Button事件未在jQuery模态内部触发的问题。请注意,将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年前的回答中所述,但是无论如何,谢谢!
迈克

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
我相信您可以将UseSubmitBehaviorButton的属性设置为falsevalue。这样,你不需要任何appendprepend电话。
Yuriy Rozhovetskiy

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");
    }
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.