CODEWITHSUNDEEP
javascriptjqueryhtmldom
Jason
Jason

Reputation: 821

jQuery Datepicker is not being executed

I have the following in my main php file:

<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>
    $( function() {
        $( "#datepicker" ).datepicker();
    } );
</script>

The input box that contains the input box is being written by innerHTML.

For example, this is how the input box is being written.

echo $api->get_add_number(); calls PHP code. There is a select box that will call the following:

function fetch_select(val)
{
    $.ajax({
        type: 'post',
        url: 'fetch_data.php',
        data: {
            get_option:val
        },
        success: function (response) {
            document.getElementById("new_select").innerHTML=response;
        }
    });
}

From there the input box will be written and returned as innerHTML.

The issue is when I try and click the input box:

<input type="text" id="datepicker"/>

I get no date pick popup. Is this because it is in innerHTML and can't be reached by javascript?

Upvotes: 1

Views: 34

Answers (1)

Ramon Marques
Ramon Marques

Reputation: 3264

No, there is nothing to do with innerHTML, the problem here is timing. All jquery plugins are built when you call its function.

So you just need to call it after include your new html

success: function (response) {
            document.getElementById("new_select").innerHTML=response;
            $( "#datepicker" ).datepicker();
         }

Upvotes: 3

Related Questions