Формат даты DatePicker пользовательского интерфейса jQuery на AJAX не работал - PullRequest
Новая
       14

Формат даты DatePicker пользовательского интерфейса jQuery на AJAX не работал

0 голосов
/ 28 июня 2019

У меня странная проблема. Я хочу иметь JQuery UI DatePicker с раскрывающимся списком формата даты.

Я нашел это , и протестировал и отлично работает при загрузке страницы. Однако тот же код не работает, когда я загружаю страницу с помощью вызова ajax. 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript">
  $( function() {
    $( "#id_management_date" ).datepicker();
    $( "#id_management_date_format" ).on( "change", function() {
    alert(3);
      $( "#id_management_date" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
  } );
  </script>

При загрузке содержимого ajax я могу выбрать календарь. Но когда я меняю выпадающий список форматирования, он не форматирует дату в DatePicker.

1 Ответ

0 голосов
/ 28 июня 2019

Это потому, что элемент загружается динамически после загрузки страницы и не является частью исходного DOM.

Ссылка вот так 

    $("body").on("change", "#id_management_date_format", function(){
        alert(3);
        $( "#id_management_date" ).datepicker( "option", "dateFormat", $( this ).val() );
    });

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

Пример рабочего псевдокода.

HTML + скрипты 

<!DOCTYPE>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    </head>
    <body>
    <header></header>
    <div id="holder">
        <input type="button" onclick="GetDatePickers();" value="Get Date Picker Inputs"/>
    </div>
    <footer></footer>
    <script>
        function GetDatePickers(){
            $.ajax({
                type:"post",
                url:"getdatepickers.php",
                data:{test:"test"},
                success:function(response){
                    console.log(response);
                    $("#holder").append(response);
                    $( "#id_management_date" ).datepicker();
                    $( "#id_management_date_format" ).datepicker("option", "dateFormat");
                },
                error:function(resposne){
                    console.log(response);
                }
            });
        };
        $(function() {
            $( "body" ).on( "change", "#id_management_date_format", function() {
                alert(3);
                console.log($(this).val());
                $( "#id_management_date" ).datepicker( "option", "dateFormat", $(this).val());
            });
        });
    </script>
    </body>
</html>

PHP - файл для отправки вызова Ajax на 

if(isset($_POST['test'])){
    $html =  <<<DOC
    <input type="text" id="id_management_date"/>
    <input type="text" id="id_management_date_format"/>
DOC;
    echo $html;
}
...