jQuery模态表单对话框回发问题答案

【问题标题】：jQuery modal form dialog postback problemsjQuery模态表单对话框回发问题
【发布时间】：2010-10-08 19:13:26
【问题描述】：

我创建了一个 jQuery UI 模态表单，我希望该表单触发回发，但我很难让它工作。

我知道有很多文章是基于使用 SimpleModal 插件的，我已经尝试修改这些并覆盖 _doPostback 函数，但没有任何乐趣。

我认为问题在于对我的 __doPostBack 函数的调用以及参数应该是什么。是这样吗？

这是我的表格

<form id="summaryForm" runat="server">
    <div id="dialog" title="Quick Booking">
        <p>Select user from list or enter name in box</p>
        <fieldset>
            <p><label>Is machine going out of the office?</label></p>
            <asp:RadioButton  TextAlign="Left" GroupName="outOfOffice" Text="Yes" ID="optYes" class="radio" runat="server" />
            <asp:RadioButton  TextAlign="Left" GroupName="outOfOffice" Text="No" ID="optNo" class="radio" runat="server" Checked="true" />

            <label for="dropLstUser">User:</label>
            <asp:DropDownList ID="dropLstUser" runat="server" />
            <input type="text" name="txtUser" id="txtUser" value="" class="text" />
            <label for="txtStartDate">Start Date:</label>
            <input type="text" id="txtStartDate" name="txtStartDate" class="datepicker" />
            <asp:HiddenField ID="assetField" runat="server" />
            <%--<button onclick="performPostBack('summaryForm')">Postback</button>--%>
        </fieldset>
    </div>
    //--------------------------------

这里是 JavaScript 代码：

<script type="text/javascript">
    $(function() {
        $("#dialog").dialog({
            bgiframe: true,
            height: 300,
            modal: true,
            buttons: {
                'Close': function() {
                             alert("closing");
                             $(this).dialog("close");
                             __doPostBack = newDoPostBack;
                             __doPostBack("aspnetForm",null);
                         }
            }
        });
    });

    function newDoPostBack(eventTarget, eventArgument)
    {
        alert("postingback");
        var theForm = document.forms[0];

        if (!theForm)
        {
            theForm = document.aspnetForm;
        }

        if (!theForm.onsubmit || (theForm.onsubmit() != false))
        {
            document.getElementById("__EVENTTARGET").value = eventTarget;
            document.getElementById("__EVENTARGUMENT").value = eventArgument;
            theForm.submit();
        }
    }
</script>

【问题讨论】：

标签： asp.net jquery-ui postback

【解决方案1】：

要在将对话框附加到表单时消除动画故障，以下是策略。

open: function (event, ui) {
     var dg = $(this).parent();
     setTimeout(function () { dg.appendTo("form"); }, 1000);
});

【讨论】：

【解决方案2】：

“AppendTo”选项对我有用。

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

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

【讨论】：

【解决方案3】：

如果我各有一个，我就可以完成这项工作。一个div，一个脚本，一个链接。在我的例子中，对话框允许用户为每个数据库记录留下一个“注释”。我的对话框上没有任何按钮，只有默认的右上角“x”来关闭对话框。

但我试图让它在ColdFusion 查询循环中工作。多条记录，每条记录都有自己的对话框按钮、关联的脚本和 div。我正在动态更改 ID，因此它们都是唯一的（也就是说，将 _XX 附加到所有 ID 中，其中 XX 是记录的主键）。

当我扩展到这个模型时，有多个对话框、脚本、div。如果我打开每个对话框来编辑该记录的相应“注释”，它只会保存最后一个。我应该在按钮单击时自动执行 .parent().appendTo 吗？它在某个地方变得混乱。

如果我不打开任何对话框（不通过对话框进行任何更改）并对表单结果运行转储，我会看到所有对话框字段都按预期在帖子中出现。

当我查看生成的原始 HTML 时...所有的 ID 都是唯一的并且被适当地调用。我在想我在某处冲突的名称/ID 上发生了冲突，但在这方面看起来一切都很好。

我的脚本：

<script type="text/javascript">
    // Increase the default animation speed to exaggerate the effect
    $.fx.speeds._default = 1000;
    $(function() {
        $( "##dialog#getALLFacilityEquipOrders.order_id#" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
            width: 500,
            resizable: false
        });

        $('.countable2').jqEasyCounter({
            'maxChars': 2000,
        });

        // Dialog Link
        $('##dialog_link#getALLFacilityEquipOrders.order_id#').click(function(){
            $('##dialog#getALLFacilityEquipOrders.order_id#').dialog('open');
            return false;
        });

        //hover states on the static widgets
        $('##dialog_link#getALLFacilityEquipOrders.order_id#, ul##icons li').hover(
            function() { $(this).addClass('ui-state-hover'); },
            function() { $(this).removeClass('ui-state-hover'); }
        );

        $("##dialog#getALLFacilityEquipOrders.order_id#").parent().appendTo($("form##allequipedit"));
    });
</script>

我的 div：

<div id="dialog#getALLFacilityEquipOrders.order_id#"
     title="Notes For #getALLFacilityEquipOrders.cLicenseNumber# - Order ID: ORD-#getALLFacilityEquipOrders.order_id#"
     style="display:none;">

    <cfquery datasource="#a_dsn#" name="getOrderNotes">
        select notebody
        from QIP_EquipOrders_Notes
        where fk_order_id = #getALLFacilityEquipOrders.order_id#
    </cfquery>
    <fieldset class="qip_menu">
        <label><b>Enter/Edit Notes:</b></label>
        <textarea class="countable2"
                  id="notebody_#getALLFacilityEquipOrders.order_id#"
                  name="notebody_#getALLFacilityEquipOrders.order_id#"
                  rows="10"
                  cols="75">#getOrderNotes.notebody#</textarea>
    </fieldset>
</div>

我的按钮：

<a href="##"
   id="dialog_link#getALLFacilityEquipOrders.order_id#"
   class="ui-state-default ui-corner-all"
><span class="ui-icon ui-icon-newwin"></span>Notes</a>

【讨论】：

请注意，我在需要转义的地方使用双磅符号。对于那些不熟悉的人，CF 在变量周围使用井号来输出。
更新：一旦我将 appendTo() 移到按钮的单击函数中，我就开始工作了： //Dialog button $( "##opener#getALLFacilityEquipOrders.order_id#" ).click( function() { $("##dialog#getALLFacilityEquipOrders.order_id#").dialog("open"); $("##dialog#getALLFacilityEquipOrders.order_id#").parent().appendTo($("form# #allequipedit")); 返回 false; });

【解决方案4】：

'Close': function() {
             alert("closing"); 
             $(this).dialog("close"); 
             __doPostBack = newDoPostBack; 
             __doPostBack("aspnetForm", null); 
         }}});});

__doPostBack 函数获取导致回发的控制权和一个参数（如果需要）。您的 JavaScript 示例和您的标记似乎不匹配。例如，我在上面引用的地方，您引用 aspnetForm，将其更改为表单的 ID，然后重试。

确保您用于客户端脚本的 ID 与运行时 ASP.NET 控件的客户端 ID 相同。如果控件驻留在 INamingContainer 中，那么它将具有基于其父容器的唯一 ID，因此 YourControlID 将变为 YourINaminContainerID_YourControlID。

让我们知道结果。

【讨论】：

我将 id 设置为 aspnetForm 的原因是因为我尝试使用真实的表单名称 - summaryForm 并且我的 firebug javascript 调试器说 __EVENTTARGET 为空。我检查了源代码并注意到 asp.net 将客户端 ID 更改为 aspnetForm - 仍然 __EVENTTARGET 为空............
是控件导致回发表单本身还是按钮？在这种情况下，它是一个模态对话框，因此没有提交按钮。我尝试添加自己的提交按钮，而不是覆盖其中一个 jquery 生成的按钮，但这也不起作用。

【解决方案5】：

请注意，jQuery UI v1.10 中有一个附加设置。添加了一个 appendTo 设置，以解决您用于将元素重新添加到表单的 ASP.NET 解决方法。

试试：

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

【讨论】：

【解决方案6】：

当我使用时它按预期工作

$("#divDlg").dialog("destroy");

而不是

$("#divDlg").dialog("close").appendTo($("#Form1")).hide();

当我们附加到表单并重新打开对话框时，我遇到了布局和 z-index 问题。

【讨论】：

【解决方案7】：

我设法解决了这个问题 - 可能不是最好的方法，但这就是我所做的。

对话框不会回发，因为jQuery UI 将提交按钮从表单中取出并将其附加到正文标记的底部，因此当您尝试回发按钮时它不知道它在发布什么。

我通过修改 jQuery UI 代码来解决这个问题：

uiDialog = (this.uiDialog = $('<div/>'))
               .appendTo(document.body)
               .hide()
               .addClass(
                       'ui-dialog ' +
                       'ui-widget ' +
                       'ui-widget-content ' +
                       'ui-corner-all ' +
                       options.dialogClass
               )

到这里：

uiDialog = (this.uiDialog = $('<div/>'))
               .appendTo(document.forms[0])
               .hide()
               .addClass(
                       'ui-dialog ' +
                       'ui-widget ' +
                       'ui-widget-content ' +
                       'ui-corner-all ' +
                       options.dialogClass
               )

修改源库并不理想，但总比没有好。

【讨论】：

【解决方案8】：

我使用的一个厚颜无耻的技巧是在页面上的 div 中创建一个普通的 .NET 按钮以及文本框等，使用 jQuery 获取该 div 的 HTML，将其添加到对话框中，然后删除原始 div 中的 HTML 以避免 id 重复。

<div id="someDiv" style="display: none">
    <p>A standard set of .net controls</p>
    <asp:TextBox ID="textBoxl" runat="server" CssClass="required email"></asp:TextBox>
    <input id="button1" type="button" value="Confirm"  onclick="SomeEvent();" />
</div>

还有脚本：

var html = $("#someDiv").html();
$("#dialog").append(html);
$("#someDiv").remove();
$("#dialog").dialog({
        bgiframe: true,
        height: 300,
        modal: true
});

【讨论】：

【解决方案9】：

非常感谢 csharpdev 的帖子！以下代码为我的页面完成了它：

$("#photouploadbox").dialog({
    autoOpen: false,
    modal: true,
    buttons: { "Ok": function() { $(this).dialog("close"); } },
    draggable: false,
    minWidth: 400 });

$("#photouploadbox").parent().appendTo($("form#profilform"));

【讨论】：

【解决方案10】：

创建对话框后，只需将对话框移回表单。示例：

 $("#divSaveAs").dialog({bgiframe:false,
                            autoOpen:false,
                            title:"Save As",
                            modal:true});
    $("#divSaveAs").parent().appendTo($("form:first"));

这对我有用。回发作品查找。

【讨论】：

在整个上午都在努力解决这个问题之后，我遇到了这个问题，而且效果很好。我喜欢 1 行修复。
谢谢。为我省了很多痛苦
这在某些情况下效果很好（比如我的！）我稍微改变了一点，使其更加 jQuery-ish 添加将其移回表单的代码到 open: 方法。 open:function(){$("#divSaveAs").parent().appendTo($("form:first"));}
谢谢 - 这对我有用。任何人都知道为什么 jqui 对话框将这些控件移出表单？他们是否假设您不希望将对话框中的 UI 元素发布到服务器？
@russau 附加到正文的原因在forum.jquery.com/topic/… 中解释——基本上这是在 IE 中正确进行 z-index 的唯一保证方法