jquery ui datepicker bên trong asp.net UpdatePanel

Question

Tôi có một trang web, nơi tôi đang sử dụng một jQuery datepicker UI trên một hộp văn bản asp.net, mà nằm bên trong một UpdatePanel. Dưới đây là mô tả về những gì tôi làm khoảng

<script type="text/javascript"> 
    $(document).ready(function() { $(".datepicker").datepicker(); }); 
</script> 

<asp:UpdatePanel ... > 
    ... 
    <asp:TextBox runat="server" CssClass="datepicker" /> 
    <asp:Button runat="server" /> 
    ... 
</asp:UpdatePanel> 

Khi lần đầu tiên tải trang, mọi thứ hoạt động tốt. Khi nhấp vào bên trong hộp văn bản, trình đếm ngày bật lên. Nhưng khi tôi nhấp vào nút, và một postback async được thực thi, các datepicker không còn bật lên, khi tôi nhấp vào lĩnh vực một lần nữa.

Tôi biết rằng vấn đề là do UpdatePanel thay thế hoàn toàn tất cả HTML có sẵn khi nó được cập nhật, do đó, có hiệu lực, nó là trường văn bản mới chưa được khởi tạo với chức năng datepicker.

Tôi đoán rằng tôi không nên sử dụng $ (tài liệu) .ready() ở đây để khởi tạo trình đặt ngày của tôi, nhưng đâu là nơi tốt để đặt mã khởi tạo? Hoặc là có một cách mà tôi có thể retrigger mã khởi tạo sau khi một bản cập nhật AJAX?

Answer 1

thêm tập lệnh phía sau, đó là những gì tôi làm.

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 

<script type="text/javascript"> 
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) { 
     $(".datepicker").datepicker(); 
    }); 
</script> 

Answer 2

Thêm tập lệnh này vào cuối trang của bạn.

Thay thế hàm initialize() bằng bất kỳ mã nào bạn muốn chạy mỗi khi có một phần postback từ bảng cập nhật.

<script type="text/javascript"> 
    function pageLoad(sender, args) { 
     if (args.get_isPartialLoad()) { 
      initialize(); 
     } 
    } 
</script> 

Answer 3

Thay thế tên lớp '.datepicker' bằng tên của đối tượng trong trang.

Ví dụ:

<script type="text/javascript"> 
    $(document).ready(function() { $("#<%=DateTextBox.ClientID %>").datepicker(); }); 
</script> 

<asp:UpdatePanel ... > 
    ... 
    <asp:TextBox runat="server" ID="DateTextBox"/> 
    <asp:Button runat="server" /> 
    ... 
</asp:UpdatePanel>} 

Answer 4

$(document).ready(function() { 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
     function EndRequestHandler() { $(".datepicker").unbind().mask("99/99/9999").datepicker() }; 
     $.getScript("../Scripts/jquery.maskedinput.min.js", function() { 
      $(".datepicker").mask("99/99/9999"); 
     }); 
     $.getScript("../Scripts/jquery-ui-1.11.3.min.js", function() { 
      $(".datepicker").datepicker() 
     }); 
    });