Jquery ui datepicker внутри asp.net UpdatePanel

У меня есть веб-страница, где я использую jQuery UI datepicker в текстовом поле asp.net, которое находится внутри UpdatePanel. Вот описание того, что я делаю грубо

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

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

Когда я впервые загружаю страницу, все работает нормально. При нажатии внутри текстового поля появляется датапикер. Но когда я нажимаю кнопку и выполняется async postback, датапикер больше не появляется, когда я снова нажимаю поле.

Я знаю, что проблема в том, что UpdatePanel полностью заменяет все содержимое HTML, когда оно обновляется, поэтому на самом деле это новое текстовое поле, которое не было инициализировано функцией datepicker.

Я предполагаю, что я не должен использовать $(document).ready() здесь, чтобы инициализировать мои datepickers, но где хорошее место для размещения кода инициализации? Или есть способ, с помощью которого можно перезапустить код инициализации после обновления AJAX?

Ответы

Ответ 1

добавьте script за то, что я делаю.

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

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

Ответ 2

Добавьте этот script в конец вашей страницы.

Замените функцию initialize() любым кодом, который вы хотите запускать каждый раз, когда есть частичная обратная передача из панели обновлений.

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

Ответ 3

Заменяет имя класса ".datepicker" на имя объекта на странице.

Пример:

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

Ответ 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()
        });
    });