DatePicker가 AJAX UpdatePanel에서 볼 때 텍스트 상자에 DatePicker가 실행되지 않음

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
     <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <p runat="server"> 
      <asp:Label ID="lblDOA" runat="server" Text="Appointment Date :" Height="21px" 
       Width="136px" Visible="False"></asp:Label> 
      <asp:TextBox ID="txtDOA" runat="server" CssClass="fieldz" AutoPostBack="false" 
       Visible="False" ViewStateMode="Enabled"></asp:TextBox> 
     </p> 
     </ContentTemplate> 
     </asp:UpdatePanel>

페이지가 처음로드 될 때 위의 텍스트 상자가 표시되지 않습니다. 사용자가 다른 드롭 다운 목록을 클릭하고 몇 가지 항목을 선택하면 표시됩니다. 텍스트 상자가 나타나지만 AJAX UpdatePanel을 사용하여 텍스트 상자가 보이기 때문에 JQuery 날짜 표시기가 작동하지 않습니다. HTML이 페이지에 추가되지 않습니다.DatePicker가 AJAX UpdatePanel에서 볼 때 텍스트 상자에 DatePicker가 실행되지 않음

어떤 안내 지침을 고치겠습니까?

아래의 Jquery를 붙여 넣습니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" 
    type="text/javascript"></script> 
<script type="text/javascript"> 
    jQuery(function ($) { 
     //$("#occurrence_dateTextBox").mask("99/99/9999"); 
     $("#<%= txtDOA.ClientID %>").datepicker(); 
     //$(".datepicker").datepicker(); 
</script> 
    });

출처

2011-11-10 MStp

문서를 준비하지 않고 입력을 추가 할 때 datepicker를 추가해야합니다. 입력을로드하는 데 사용하는 js를 게시하면 도움을 줄 수 있습니다. – Sinetheta

이것은 귀하의 우려를 해결하는 것으로 보입니다. 업데이트 패널이 업데이트 된 후 날짜 선택 도구를 초기화해야합니다. http://stackoverflow.com/questions/1190549/how-can-i-run-some-javascript-after-an-update-panel-refreshes – enduro

발견되고 더 쉬운 해결 방법.

패널에 텍스트 상자를 감싸고 폼로드시 패널을 visible = false로 설정 한 다음 Ajax 부분 포스트 백에서 visible = true로 변경하면 Jquery가 텍스트 상자를 잘 처리합니다.

위의 코드에서 해결 방법은 다음과 같습니다.

<asp:Panel ID="Panel1" runat="server" Visible="false"> 
      <p> 
       <asp:Label ID="lblDOA" runat="server" Text="Appointment Date :" Height="21px" Width="136px" 
        Visible="true"></asp:Label> 
       <asp:TextBox ID="txtDOA" runat="server" CssClass="fieldz" AutoPostBack="false" Visible="true" 
        ViewStateMode="Enabled"></asp:TextBox> 
      </p> 
     </asp:Panel>

출처

2011-11-10 02:24:51 MStp

jQuery 코드가 실행될 때 HTML 요소가 DOM의 일부가 아닌 경우이 경우도 마찬가지입니다. jQuery 코드를 DOM에 추가 한 후 jQuery 코드를 요소에 바인딩하는 것이 좋습니다. jQuery의 live() 함수를 살펴보십시오. 기본적으로 DOM에 추가되는 요소를 감시하고 바인딩을 적용합니다.

날짜 선택 도구 바인딩이 플러그인 내부에서 발생하므로이 작업을 수행하기 위해 추가 작업을 수행해야합니다. 날짜 선택 도구의 일반 코드 줄에는 live() 구문이 없습니다. 그러나 새로 추가 된 요소에 포커스가 있으면 플러그인을 실행하는 것이 본질적으로 원하는 작업입니다. 결국 날짜 선택 도구는 요소가 포커스를받을 때까지는별로 유용하지 않습니다. 따라서 live()를 사용하여 "포커스"이벤트에 바인딩해야합니다. 다음과 같은 것 :

$('#<%= txtDOA.ClientID %>').live('focus', function() { 
    $(this).datepicker(); 
});

출처

2011-11-10 01:35:54 David

공유 감사를 확인합니다. – MStp

라이브처럼 보이지 않습니다. 대리자를 사용하거나 다음과 같이 $ (문서) .delegate ('# <% = txtDOA.ClientID %>', 'focus', function() { $ (this))를 사용해야합니다. datepicker(); }); 그러나 나는 아직도 첫 부분을 알아 내야 만한다. – MStp

비동기 포스트 백 후에 날짜판을 다시 바인딩 할 수도 있습니다. 기능인 pageLoad는 .NET Update Panels에 의해 자동으로 호출되며, 한 번만이 아니라 여러 번 숨기거나 표시 할 수 있습니다.

function pageLoad(){ $("#<%= txtDOA.ClientID %>").datepicker(); }

출처

2016-05-12 15:44:07 Sky

DatePicker가 AJAX UpdatePanel에서 볼 때 텍스트 상자에 DatePicker가 실행되지 않음

답변

관련 문제