对话框中的按钮不会回发

Question

我有一个使用 jQuery .dialog() 函数显示的对话框，该对话框包含一个按钮，我想将其发布回另一个页面，但它不起作用。我无法使用PostBackUrl 属性集或OnClick 发布它（这永远不会触发）。但是，当我单击其中一个Calendar 日期时，我认为默认情况下会导致回发，页面回发到我在按钮PostBackUrl 属性中设置的网址！我想使用asp:Calendar，但在选择时禁用默认的回发行为，并且只有在用户选择按钮时才会发布，但显然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/