jquery UI DatePicker внутри asp.net UpdatePanel

Question

У меня есть веб-страница, на которой я использую указатель даты jQuery UI для текстового поля 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>

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

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

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

Answer 1

добавьте сценарий, вот что я делаю.

<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

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

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

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

Answer 3

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

Answer 4

Заменяет имя класса '. 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>}