在触发更新面板和过滤器事件时,jquery对话框将打开多个实例

时间:2013-11-27 16:13:04

标签: jquery asp.net

哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇。我有一个像这样的jquery ui对话框:

    $("#dialogAssignedTo").hide();
    $("#dialogAssignedTo").dialog({
        autoOpen: false,
        appendTo: "form:first",
        width: 'auto',
        height: 'auto',
        modal: true
    });

点击超链接即会打开:

 $("#MainContent_hlAT").click(function (evt) {
                $("#dialogAssignedTo").dialog("open");
                evt.preventDefault();
            });

我有一个隐藏字段,用于存储跨服务器端邮件的对话框状态。基本上,如果服务器端代码已经分配了隐藏字段1,则它保持对话框保持打开状态。如果为0则隐藏如下:

    if ($("#MainContent_hdnOpenAssignedTo").val() === "1") {
        $("#dialogAssignedTo").dialog("open");
    } else {
        $("#dialogAssignedTo").hide();
    }

这一切都很好......现在我的问题。我有多个级联下降(asp.net下降)级联。选择一个下拉过滤第二个,依此类推。这也很好......但是我注意到的是页面回传后然后对话框重新打开..它很好但有效但我不喜欢页面的刷新/闪烁。所以我决定在Updatepanel触发时添加jquery ui对话框中的下拉列表:

 <Triggers>
     <asp:AsyncPostBackTrigger ControlID="dialogAssignedToddlBA"/>
     <asp:AsyncPostBackTrigger ControlID="dialogAssignedToddlBU"/>
 </Triggers>

所以基本上整个页面和jquery ui对话框都包含在一个asp.net更新面板中。问题是asyncpostback看起来有效,但它在下拉列表的每个SelectedIndexChanged事件之后反复打开对话框。我在这做错了什么?我希望在异步回发中级联下拉,以便我看不到闪烁......

修改

根据评论,我提供了更多信息......

例如,对话框只是一个下拉值表(忽略表暂时吮吸的事实......),这里是示例html:

 <div id="dialogAssignedTo" title="Company Assigned To">
                <table style="height:500px; width:500px;">
                    <tr>
                        <td class="labelField"><asp:Label ID="lblDBA" runat="server" Text="BA:"></asp:Label></td>
                        <td class="valueField">
                            <asp:DropDownList class="chosen-select" ID="dialogAssignedToddlBA" ToolTip="Select BA..." runat="server" AutoPostBack="True" OnSelectedIndexChanged="dialogAssignedToddlBA_SelectedIndexChanged"></asp:DropDownList></td>
                        <td class="labelField"><asp:Label ID="lblDBU" runat="server" Text="BU:"></asp:Label></td>
                        <td class="valueField"><asp:DropDownList class="chosen-select" ID="dialogAssignedToddlBU" ToolTip="Select BU..." AutoPostBack="True" runat="server" OnSelectedIndexChanged="dialogAssignedToddlBU_SelectedIndexChanged"></asp:DropDownList></td>
                    </tr>
                    <tr>
                        <td class="labelField"><asp:Label ID="lblDATCountry" runat="server" Text="Country:"></asp:Label></td>
                        <td class="valueField"><asp:DropDownList class="chosen-select" data-placeholder="Select Country..." ID="dialogAssignedToddlCountry" ToolTip="Select Country..." AutoPostBack="True" runat="server" OnSelectedIndexChanged="dialogAssignedToddlCountry_SelectedIndexChanged"></asp:DropDownList></td>

                        <td class="labelField"><asp:Label ID="lblDATRegion" runat="server" Text="Region:"></asp:Label></td>
                        <td class="valueField"><asp:DropDownList class="chosen-select" data-placeholder="Select Region..." ID="dialogAssignedToddlRegion" ToolTip="Select Region..." AutoPostBack="True" runat="server" OnSelectedIndexChanged="dialogAssignedToddlRegion_SelectedIndexChanged"></asp:DropDownList></td>
                    </tr>
                    <tr>
                        <td class="labelField"><asp:Label ID="lblDATCity" runat="server" Text="City:"></asp:Label></td>
                        <td class="valueField"><asp:DropDownList class="chosen-select" data-placeholder="Select City..." ID="dialogAssignedToddlCity" ToolTip="Select City..." AutoPostBack="True" runat="server" OnSelectedIndexChanged="dialogAssignedToddlCity_SelectedIndexChanged"></asp:DropDownList></td>
                        <td class="labelField"><asp:Label ID="lblDC" runat="server" Text="Company:"></asp:Label></td>
                        <td class="valueField"><asp:DropDownList class="chosen-select" ID="dialogAssignedToddlCompanies" ToolTip="Select Company..." AutoPostBack="True" runat="server" OnSelectedIndexChanged="dialogAssignedToddlCompanies_SelectedIndexChanged"></asp:DropDownList></td>
                    </tr>
                    <tr>
                        <td class="labelField"><asp:Label ID="lblDU" runat="server" Text="User:"></asp:Label></td>
                        <td class="valueField"><asp:DropDownList class="chosen-select" ID="dialogAssignedToddlUsers" ToolTip="Select User..." runat="server"></asp:DropDownList></td>
                        <td colspan="4" style="text-align:right;">
                            <asp:Button ID="btnSaveAssignedTo" runat="server" Text="Submit" OnClick="btnSaveAssignedTo_Click" ToolTip="Submit / Save changes?" /></td> 
                    </tr>
                </table>
         </div>

请注意每个下拉列表的事件(OnSelectedIndexChanged事件)。这意味着这些下降级联......这就是我的问题所在。我选择一个下拉值时,表单会退出并重新进入(它基本上会刷新)。这很好,但它会导致闪烁发生并带回对话框。我会假设,因为对话框位于页面更新面板内(即整个页面位于更新面板中),闪烁不会发生。页面上的任何其他下拉都很好,它只是对话框div中的下拉。

其中一个下拉列表的示例代码如下:

protected void dialogAssignedToddlBA_SelectedIndexChanged(object sender, EventArgs e)
        {
            error.Visible = false;
            hdnOpenAssignedTo.Value = "1";
            var result = GetBUDataSet(dialogAssignedToddlBA.SelectedItem.Value);

            dialogAssignedToddlBU.DataSource = result;
            dialogAssignedToddlBU.DataTextField = "BusinessUnit1";
            dialogAssignedToddlBU.DataValueField = "BusinessUnitID";
            dialogAssignedToddlBU.DataBind();
            dialogAssignedToddlBU.Items.Insert(0, new ListItem(String.Empty, String.Empty));
            dialogAssignedToddlBU.SelectedIndex = -1;

            dialogAssignedToddlRegion.ClearSelection();
            dialogAssignedToddlRegion.Enabled = false;
            dialogAssignedToddlCity.ClearSelection();
            dialogAssignedToddlCity.Enabled = false;
            dialogAssignedToddlCity.Items.Clear();
            dialogAssignedToddlCity.DataBind();
            dialogAssignedToddlCompanies.ClearSelection();
            dialogAssignedToddlCompanies.Enabled = false;
        }

在这里看不多,基本上我正在层叠其他一些下降。请注意hdnOpenAssignedTo.Value = "1";这是根据值1保持对话框打开的字段。当然对话框保持打开但是它会闪烁网格然后打开...我希望它看起来不会闪烁或刷新到最终用户。

这有用吗或我需要发布哪些其他信息?

由于

4 个答案:

答案 0 :(得分:0)

将所有脚本放在更新面板之后,如下所示

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
// your other controls
</asp:UpdatePanel>

<script type=""text/javascript">

$("#dialogAssignedTo").hide();
    $("#dialogAssignedTo").dialog({
        autoOpen: false,
        appendTo: "form:first",
        width: 'auto',
        height: 'auto',
        modal: true
    });

$("#MainContent_hlAT").click(function (evt) {
                $("#dialogAssignedTo").dialog("open");
                evt.preventDefault();
            });


if ($("#MainContent_hdnOpenAssignedTo").val() === "1") {
        $("#dialogAssignedTo").dialog("open");
    } else {
        $("#dialogAssignedTo").hide();
    }

</script>

答案 1 :(得分:0)

我通常通过在初始化对话框之前删除除最后一个对话框之外的所有对话框(这将具有下拉列表的实际状态)来解决您的问题。并且仅在此技巧之后附加到表单。

    $('#dialogAssignedTo').not(':last').remove();

   $("#dialogAssignedTo").dialog({
    autoOpen: false,
    width: 'auto',
    height: 'auto',
    modal: true
    });

$('#dialogAssignedTo').parent().appendTo($('form:first'));

答案 2 :(得分:-1)

检查是否:

  • 隐藏字段在异步回发之前和之后在客户端检查其值时具有正确的值:

    $( “#MainContent_hdnOpenAssignedTo”)。VAL()

  • 当隐藏字段在异步回发之前和之后具有/不具有(runat =“server”)属性时,此表达式的结果不同:

如果这没有帮助,请在异步回发之前和之后共享更多UpdatePanel定义和基础HTML。

答案 3 :(得分:-1)

  

这是类似的问题,我需要查看完整的代码来检查   问题或者您可以尝试取消绑定事件单击

$("#MainContent_hlAT").unbind("click").click(function (evt) {
    $("#dialogAssignedTo").dialog("open");
    evt.preventDefault();
});