CODEWITHSUNDEEP
jqueryjquery-uidatepickerjquery-ui-datepicker
Fabrizio Mazzoni
Fabrizio Mazzoni

Reputation: 1909

jQuery datepicker not appearing after first click

I'm trying to debug my script as it is causing a datepicker not to display after the first time that it gets clicked.

The datepicker is created as follows:

$(".dp").datepicker({
    dateFormat: 'dd/mm/yy',
    onSelect: function () {
        // Activate next  textbox and focus on it for further editing
        var el = $(this).closest('tr').next().find('input').prop("disabled", false).removeClass("disabled");
        // Trigger change as when using this event it overrides element onchange and we have to force the event to fire
        $(this).trigger("change");
    }   
});

$(".dp").change(function () {
    if ($(this).val() == "") {
        var el = $(this).closest('tr').next().find('input').prop("disabled", true).addClass("disabled");    
    }
})

The datepicker is bound to a class of textboxes which are in a div and the content is loaded with the .load() function.

On the page I have 

<div id="newitem" class="newitem"></div>

There is a button that loads the div content from a PHP page that contains a X number of textboxes which are dates.

<script type="text/javascript">

$(".info").click(function () {
    $("#newitem").fadeIn().load("ajax/divs/tripinfo.php?id=" + $(this).attr("id")).draggable();
})
</script>

The page load fine and on the first div loaded the datepicker works as expected. On the loaded page I hide the div with the following:

<button onclick="$('#newitem').fadeOut().remove();" class="closebutton">X</button>

Once I close and open another div with the .load() function, the datepicker does not work anymore. Obviously if I reload the page the first time it will work again and behaviour repeats.

I suspect it has to do with the way I show and hide the div but am not really sure. I cannot debug as there are no error messages in the javascript console.

Upvotes: 0

Views: 3528

Answers (2)

dgregory
dgregory

Reputation: 21

A very simple fix that worked for me 5 years later:

 $(document).on('focus', '#datepicker', function(){
            $(this).datepicker({
                dateFormat: 'dd-mm-yy', });
        });

Note: you can ignore the dateFormat setting that is particular to the project.

The issue I faced: Datepicker was triggering only after the 2nd click. So you had to click the box, click somewhere outside and then click on the datepicker field again.

Solution: Because the DOM has been updated dynamically via JS that adds new content to the page (the form that contains our "newborn" datepicker field),we definitely need .on() because it will scan the DOM again unlike.click() which will work on the initial state of the DOM (right as we served it from backend ie Laravel).

The above however does not fix the problem. The key is on 'focus' action. For reasons I am still researching this just fixed the issue and now the datepicker is toggled with the first click and TAB (which seems to be the only difference so far).

Upvotes: 0

Sami
Sami

Reputation: 2110

First, change your datepicker settings to global, so you don't need to load them on every run:

$.datepicker.setDefaults({
    dateFormat: 'dd/mm/yy',
    onSelect: function () {
    // Activate next  textbox and focus on it for further editing
    var el = $(this).closest('tr').next().find('input').prop("disabled", false).removeClass("disabled");
    // Trigger change as when using this event it overrides element onchange and we have to force the event to fire
    $(this).trigger("change");
});

Then use on to bind the click event to current and coming elements with dp class:

$(document).on('change', '.dp', (function () {
    if ($(this).val() == "") {
        var el = $(this).closest('tr').next().find('input').prop("disabled", true).addClass("disabled");    
    }
});

Then make bind the first elements, that are already on the page:

$(".dp").datepicker();

And then alter the ajax call to include a callback, that has a constructor to make the new textboxes datepickers:

<script type="text/javascript">
    $(".info").click(function () {
        $("#newitem").fadeIn().load("ajax/divs/tripinfo.php?id=" + $(this).attr("id"), function() {
            $(".dp").datepicker();
       }).draggable();
    })
</script>

This assumes that the new elements also have class dp. But I'm sure you get the point. This should work, unfortunately didn't have time to test. Comment if there's something wrong.

Upvotes: 1

Related Questions