대화 상자의 단추가 뒤로 돌아 오지 않습니다.

Question

jQuery 기능으로 표시 할 대화 상자가 있습니다.이 대화 상자에는 다른 페이지로 다시 게시 할 단추가 있지만 작동하지 않습니다. PostBackUrl 속성 세트 또는 OnClick (게시되지 않음)으로 게시 할 수 없습니다. 그러나 내가 Calendar 날짜 중 하나를 클릭하면, 기본적으로 포스트가 되돌아 온다고 가정하고, 페이지는 PostBackUrl 속성에 설정된 URL로 다시 게시됩니다! 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 : 버튼과 ASP의 날짜 : 달력

<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"> 

,617,

편집 : 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 유틸리티로, 에테르 에테르 색) 그 참조 :

그 예를 타고 대화 상자에서 키퍼 외부로 콘텐츠를 이동하고 있으며 귀하의 경우에는 form 외부로 이동하면 왜 화재가 발생하지 않습니다.

해결책으로 나는 일종의 해킹을 생각해 냈습니다. 대화 상자가 생성 된 후 양식으로 다시 이동하십시오. 다음은 그 예입니다. 대화는 다음과 같이 생성 된 직후

<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()); 
} 
}); 

그리고 여기에 온라인 테스트, 난 같은 형태로 내부에 특정 ID로 사업부를 배치 당신이 dom을 보는 경우에 일하고있는 그 것이다 : http://jsfiddle.net/Qej8S/2/