在同一页面中使用不同的jQuery对话框表格

Question

我想在同一页面中使用多个JQuery对话框表单。其中一个工作（divEditPeriod），另一个不工作。我究竟做错了什么？代码波纹管：

$(document).ready(function() { 
       $("#divEditPage").dialog({ 
     autoOpen: false, 
     modal: true, 
     minHeight: 20, 
     height: 'auto', 
     width: 'auto', 
     resizable: false, 
     open: function(event, ui) { 
     $(this).parent().appendTo("#divEditPageDlgContainer"); 
     }, 
     }); 

     $("#divEditPeriod").dialog({ 
     autoOpen: false, 
     modal: true, 
     minHeight: 20, 
     height: 'auto', 
     width: 'auto', 
     resizable: false, 
     open: function(event, ui) { 
     $(this).parent().appendTo("#divEditPeriodDlgContainer"); 
     }, 
     }); 

     }); 

     function closeDialog(Form) { 
     //Could cause an infinite loop because of "on close handling" 
     $(Form).dialog('close'); 
     } 

     function openDialog(title, linkID, Form) { 

     var pos = $("#" + linkID).position(); 
     var top = pos.top; 
     var left = pos.left + $("#" + linkID).width() + 10; 


     $(Form).dialog("option", "title", title); 
     $(Form).dialog("option", "position", [left, top]); 
     $(Form).dialog('open'); 
     } 



     function openDialogAndBlock(title, linkID, Form) { 
     openDialog(title, linkID, Form); 

     //block it to clean out the data 
     $(Form).block({ 
     message: '<img src="<%=ResolveUrl("~") %>images/async.gif" />', 
     css: { border: '0px' }, 
     fadeIn: 0, 
     //fadeOut: 0, 
     overlayCSS: { backgroundColor: '#ffffff', opacity: 1 } 
     }); 
     }   

     function unblockDialog(Form) { 
     $(Form).unblock(); 
     } 

    } 




<div id="divPageDlgContainer"> 
         <div id="divEditPage" style="display: none"> 
          <asp:UpdatePanel ID="upnPage" runat="server"> 
           <ContentTemplate> 
            <asp:PlaceHolder ID="phrPage" runat="server"> 
             <table cellpadding="3" cellspacing="1"> 
              <tr> 
               <td> 
                *Current Page: 
               </td> 
               <td> 
                <asp:TextBox ID="txtCurrentPage" Columns="40" MaxLength="50" runat="server" /> 
                <asp:RequiredFieldValidator ID="rfvCurrentPage" runat="server" EnableClientScript="false" 
                 Display="Dynamic" ErrorMessage="Required." ControlToValidate="txtCurrentPage" 
                 ForeColor="Red" /> 
               </td> 
              </tr> 
              <tr> 
               <td> 
                *Previous Page: 
               </td> 
               <td> 
                <asp:TextBox ID="txtPreviousPage" Columns="40" MaxLength="50" runat="server" /> 
                <asp:RequiredFieldValidator ID="rfvPreviousPage" runat="server" EnableClientScript="false" 
                 Display="Dynamic" ErrorMessage="Required." ControlToValidate="txtPreviousPage" 
                 ForeColor="Red" /> 
               </td> 
              </tr> 
              <tr> 
               <td> 
                *Next Page: 
               </td> 
               <td> 
                <asp:TextBox ID="txtNextPage" Columns="40" MaxLength="50" runat="server" /> 
                <asp:RequiredFieldValidator ID="rfvNextPage" runat="server" EnableClientScript="false" 
                 Display="Dynamic" ErrorMessage="Required." ControlToValidate="txtNextPage" ForeColor="Red" /> 
               </td> 
              </tr> 
              <tr> 
               <td colspan="2" align="right"> 
                <asp:Button ID="btnSavePage" OnClick="btnSavePage_Click" Text="Save" runat="server" /> 
                <asp:Button ID="btnCancelPage" OnClick="btnCancelPage_Click" OnClientClick="closeDialog('#divEditPeriod')" 
                 CausesValidation="false" Text="Cancel" runat="server" /> 
               </td> 
              </tr> 
             </table> 
            </asp:PlaceHolder> 
           </ContentTemplate> 
          </asp:UpdatePanel> 
         </div> 
        </div> 


<div id="divEditPeriodDlgContainer"> 
        <div id="divEditPeriod" style="display: none"> 
         <asp:UpdatePanel ID="upnlEditPeriod" runat="server"> 
          <ContentTemplate> 
           <asp:PlaceHolder ID="phrEditPeriod" runat="server"> 
            <table cellpadding="3" cellspacing="1"> 
             <tr> 
              <td> 
               *Start Date: 
              </td> 
              <td> 
               <asp:TextBox ID="txtStartDate" Columns="40" MaxLength="50" runat="server" /> 
               <asp:RequiredFieldValidator ID="rfvStartDate" runat="server" EnableClientScript="false" 
                Display="Dynamic" ErrorMessage="Required." ControlToValidate="txtStartDate" ForeColor="Red" /> 
               <asp:RegularExpressionValidator ID="revStartDate" runat="server" EnableClientScript="false" 
                ControlToValidate="txtStartDate" ValidationExpression="(([1-9]|1[012])[- /.]([1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d)|((1[012]|0[1-9])(3[01]|2\d|1\d|0[1-9])(19|20)\d\d)|((1[012]|0[1-9])[- /.](3[01]|2\d|1\d|0[1-9])[- /.](19|20)\d\d)" 
                ErrorMessage="Not a valid Date." Display="Dynamic" ForeColor="Red" /> 
              </td> 
             </tr> 
             <tr> 
              <td> 
               *End Date: 
              </td> 
              <td> 
               <asp:TextBox ID="txtEndDate" Columns="40" MaxLength="50" runat="server" /> 
               <asp:RequiredFieldValidator ID="rfvEndDate" runat="server" EnableClientScript="false" 
                Display="Dynamic" ErrorMessage="Required." ControlToValidate="txtEndDate" ForeColor="Red" /> 
               <asp:RegularExpressionValidator ID="revEndDate" runat="server" EnableClientScript="false" 
                ControlToValidate="txtEndDate" ValidationExpression="(([1-9]|1[012])[- /.]([1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d)|((1[012]|0[1-9])(3[01]|2\d|1\d|0[1-9])(19|20)\d\d)|((1[012]|0[1-9])[- /.](3[01]|2\d|1\d|0[1-9])[- /.](19|20)\d\d)" 
                ErrorMessage="Not a valid Date." Display="Dynamic" ForeColor="Red" /> 
              </td> 
             </tr> 
             <tr> 
              <td colspan="2" align="right"> 
               <asp:Button ID="btnSave" OnClick="btnSavePeriod_Click" Text="Save" runat="server" /> 
               <asp:Button ID="btnCancel" OnClick="btnCancelPeriod_Click" OnClientClick="closeDialog('#divEditPeriod')" 
                CausesValidation="false" Text="Cancel" runat="server" /> 
              </td> 
             </tr> 
            </table> 
           </asp:PlaceHolder> 
          </ContentTemplate> 
         </asp:UpdatePanel> 
        </div> 
       </div> 

Answer 1

<div id="divPageDlgContainer"> 

应该

<div id="divEditPageDlgContainer"> 

？