javascript - 对话框中的按钮不会回发

Question

我有一个用 jQuery .dialog() 函数显示的对话框，这个对话框包含一个按钮，我想将其发回另一个页面，但它不起作用.我无法使用 PostBackUrl 属性集或 OnClick 发布它(这永远不会触发)。但是，当我单击其中一个 Calendar 日期时，我认为默认情况下会导致回发，页面回发到我在按钮 PostBackUrl 属性中设置的 url!我想使用 asp:Calendar，但在选择时禁用默认回发行为，并且仅当用户选择按钮时才发生发布，但显然仍然有 的选定日期回发时可用的日历。这是 .aspx 文件...

<form id="form1" runat="server">
        <asp:Button ID="btnShowDialog" runat="server" Text="Click to Show Dialog" OnClientClick="showDialog(); return false;" />
        <div class="divDialog" style="display: none">
            <table style="width: 100%;">
                <tr>
                    <td>First Name: <asp:TextBox ID="txtFirstName" runat="server" Text=""></asp:TextBox></td>
                    <td>Last Name: <asp:TextBox ID="txtLastName" runat="server" Text=""></asp:TextBox></td>
                </tr>
                <tr>
                    <td>
                        How Old are You?
                        <asp:DropDownList ID="ddlAge" runat="server">
                            <asp:ListItem Value="1">1</asp:ListItem>
                            <asp:ListItem Value="2">2</asp:ListItem>
                            <asp:ListItem Value="3">3</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        How Many Siblings do You Have?
                        <asp:DropDownList ID="ddlNumberSiblings" runat="server">
                            <asp:ListItem Value="1">1</asp:ListItem>
                            <asp:ListItem Value="2">2</asp:ListItem>
                            <asp:ListItem Value="3">3</asp:ListItem>
                            <asp:ListItem Value="4">4</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Calendar ID="calBirthday" runat="server" Width="200" >
                            <DayStyle BackColor="Yellow"  />
                        </asp:Calendar>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
                    </td>
                </tr>
            </table>
        </div>
    </form>

...和 ​​jQuery 脚本...

   <script>
        function showDialog() {
            $('.divDialog').dialog({ modal: true, show: 'slide', title: 'Please Enter Information Below', width: 500 });
        }
    </script>

...下面是 asp:Button 和 asp:Calendar 中的日期如何在浏览器中呈现...

<a title="April 28" style="color:Black" href="javascript:__doPostBack('calBirthday','4866')">28</a>

....

<input id="btnSubmit" type="submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubmit", "", false, "", "Profile.aspx", false, false))" value="Submit" name="btnSubmit">

编辑:无论我是否包含 asp:Calendar 控件，按钮提交都不起作用。但出于某种原因，日历控件选择提交有效。

Answer 1

这种对话框的问题在于它们会将您提供的内容作为内容移动到表单之外的某个地方。

举个例子:http://jsfiddle.net/Qej8S/1/

我已将内容放在 keeper 中

<div class="keeper">
    <div class="divDialog" style="display: none">
    The content of the dialog        
    </div>
</div>

但是如果运行它，您会看到(颜色，浏览器的 dom 实用程序)对话框正在将内容移到 keeper 之外，在您的情况下是将其移到 form 之外。这就是为什么不启动的原因。

为了解决这个问题，我想出了一些技巧。创建对话框后，将其移回窗体。这是一个例子。我在表单内放置一个具有特定 id 的 div，如下所示:

<div id="MoveItHere"></div>

我在创建对话框后立即将移动设置为:

$('.divDialog').dialog({modal: true, show: 'slide', title: 'Please Enter Information Below', width: 200, 
create: function( event, ui ) 
 {
    // this is the trick, I move it again inside the form, on a specific place.
    $("#MoveItHere").html($(this).parent());
 }
});

这是在线测试，如果您看到 dom:http://jsfiddle.net/Qej8S/2/，它就可以正常工作。