CODEWITHSUNDEEP
javascriptjquerydatepickerjquery-ui-datepicker
Lajos Arpad
Lajos Arpad

Reputation: 76574

jQuery datepicker runs only at first execution

My page loads daily.js this way:

<script type="text/javascript" src="/js/lib/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/lib/jquery-ui.js"></script>
<link rel="stylesheet" href="/css/jquery-ui.css">
<script type="text/javascript">
    window.loadedJQuery = true;
    window.loadedJQueryUI = true;
</script>
<script type="text/javascript" src="/js/pages/admin/daily.js"></script>

This is what daily.js contains (hugely simplified version):

document.onreadystatechange = function() {
    $("#start-date, #end-date").datepicker({dateFormat: "yy-mm-dd"});
};

this correctly makes a datepicker out of start-date and end-date, which look like this:

<label>
    Munkálatok időintervalluma: <input id="start-date" type="text"> - <input id="end-date" type="text">
</label>

So far so good. But upon some event, a popup window appears. To make sure that accordingly the Javascript related to it is correctly executed, I add an invisible iframe like this:

<iframe style="display: none;" onload="function loadJQuery() {window.loadedjQuery = document.createElement(&quot;script&quot;);window.loadedjQuery.src=&quot;/js/lib/jquery-2.1.4.min.js&quot;;window.loadedjQuery.onload = loadJQueryUI;document.head.appendChild(window.loadedjQuery);}function loadJQueryUI() {window.loadedJQueryUI = document.createElement(&quot;script&quot;);window.loadedJQueryUI.src=&quot;/js/lib/jquery-ui.js&quot;;window.loadedJQueryUI.onload = loadAddEditJob;document.head.appendChild(window.loadedJQueryUI);var link = document.createElement(&quot;link&quot;);link.rel = &quot;stylesheet&quot;;link.href = &quot;/css/jquery-ui.css&quot;;document.head.appendChild(link);}function loadAddEditJob() {window.loadedAddEditJob = document.createElement(&quot;script&quot;);window.loadedAddEditJob.src=&quot;/js/templates/AddEditJob.js&quot;;document.head.appendChild(window.loadedAddEditJob);}if (!window.loadedjQuery) {loadJQuery();} else if (!window.loadedJQueryUI) {loadJQueryUI();} else if (!loadedAddEditJob) {loadAddEditJob();}" "=""></iframe>

Inside my popup window, which is not inside an iframe I have this:

<input class="form-data" name="StartedDate" type="text" id="started-date" value="2018-07-29">

and this:

<input class="form-data" name="EndedDate" type="text" id="ended-date" value="2018-07-29">

and AddEditJob.js is loaded, which is looking like this (hugely simplified version):

$(function() {
    var d = new Date();
    $("#started-date, #ended-date").each(function() {
        if ((this.id === "started-date") && (!$(this).val())) {
            $(this).val(d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
        }
        $(this).datepicker({ dateFormat: 'yy-mm-dd' });
    });
});

My problem is that started-date and ended-date will not work as one might expect a datepicker to work, namely, when I click inside them, nothing happens. No error message, nothing, although the hasDatePicker class is correctly added to them, as one might expect. If I avoid initializing my first datepickers as datepickers like

document.onreadystatechange = function() {
    //$("#start-date, #end-date").datepicker({dateFormat: "yy-mm-dd"});
};

and open the popup window, then the items inside it are correctly initialized as datepickers and they work well. If I close the popup window and reopen it, even though everything inside was destroyed and recreated, my items will work correctly as datepickers.

My question is: How can I make sure that both the datepicker to be executed upon load and the one executed upon popup window showing would initialize all my datepickers correctly?

EDIT:

After intensively trying to solve the issue I did not manage to do it, so I created this Fiddle.

HTML:

<label>
    Munkálatok időintervalluma: <input id="start-date" type="text"> - <input id="end-date" type="text">
</label>
<input class="form-data" name="StartedDate" type="text" id="started-date" value="2018-07-29">
<input class="form-data" name="EndedDate" type="text" id="ended-date" value="2018-07-29">
<button onclick="window.createIFrame();">
    Create Iframe
</button>

JS:

    $("#start-date, #end-date").datepicker({dateFormat: "yy-mm-dd"});
window.test = function() {
    var d = new Date();
    $("#started-date, #ended-date").each(function() {
        if ((this.id === "started-date") && (!$(this).val())) {
            $(this).val(d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
        }
        $(this).datepicker({ dateFormat: 'yy-mm-dd' });
    });
};
window.createIFrame = function() {
    document.body.innerHTML += '<iframe style="display: none;" onload="console.log(window.test);window.test();"></iframe>';
}

All the four inputs should work as datepickers, but the third and fourth are not working like datepickers.

Upvotes: 0

Views: 122

Answers (1)

spankajd
spankajd

Reputation: 952

As I could see in the above code and JSFeddle. Your updating DOM by document.body.innerHTML += '<iframe style="display: none;" onload="console.log(window.test);window.test();"></iframe>'; } code.

You need to reassign datepicker event to those input field.

or simply add below code after dom update.

$('.ui-datepicker').remove();
$("#start-date, #end-date").removeClass('hasDatepicker').datepicker();

This is updated JSFeddle link. http://jsfiddle.net/g1zk8mc7/53/ Thanks

Upvotes: 1

Related Questions