jQuery UI datepicker dateformat on ajax didn't work

Question

I am having weird problem. I want to have jQuery UI DatePicker with a Dropdown of date format.

I found this, and tested and working fine on page load. However, same code is not working when I load the page via ajax call.

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

On loading the ajax content, I am able to select the calendar. But when I change the format dropdown, it's not formatting date in datepicker.

I have tried many solution over stackoverflow.com but nothing works — Shail, Jun 28 '19 at 13:53
There is n o even problem here. Event binding on dynamically created elements? All events are working. Just updating value not works thts why posted here — Shail, Jun 28 '19 at 15:10
Hello @mplungjan, why you didn't read it. There is no even prob. The issue is just on updating value. All functions, events are working in ajax — Shail, Jun 28 '19 at 15:12
then there is too little information to give a proper answer. The code did not work when loaded with ajax. Loaded how? Do you load the scripts using getScript too? — mplungjan, Jun 28 '19 at 15:32
Is there an element with an id of "id_management_date_format" present on the page when you load this code? Be sure to read [Event binding on dynamically create elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements). — Heretic Monkey, Jun 28 '19 at 15:40
@HereticMonkey, id_management_date_format is select box and id_management_date is text box with calnder comming from simple jquery ajax content. After ajax load this content, The Onchange, working and even print the alert. The calender also works. Only the format npot changed — Shail, Jun 29 '19 at 06:03

akaBase · Accepted Answer · 2019-06-29T14:32:26.027

It's because the element is loaded dynamically after the page has loaded and isn't part of the original DOM.

Reference it like so

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

Edit: After running a local test it's the same issue but during the initialization of the Date Picker Inputs being before they are added to the DOM.

Example working pseudo code.

HTML + Scripts

<!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 - file to send Ajax call to

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

Its alerting but not updating the value ion calender text box — Shail, Jun 29 '19 at 06:12
Yes, Issue was my function call was above the $("#holder").append(response);. — Shail, Jul 01 '19 at 07:42

jQuery UI datepicker dateformat on ajax didn't work

1 Answers1