Script not working after Ajax loaded content

Question

I am creating a website with 3 sections: get item, workplace, and change logs.

The way I want the website work is that: you first get an item, then the item is loaded into Workplace (as a table, with dropdowns, calendar for you to change the info) using Ajax, then you make changes/hit submit and changes will appear on the Change logs using again Ajax.

This way my whole webpage doesn't have to refresh every time get Item or submit changes.

ALSO, when you get the item, i put it in a SESSION, and the WorkPlace is generated by pulling data from database based on this session's info using Ajax.

If user hit refresh, i also have static code to load the Workplace table from the database using info from the SESSION

I got almost everything done. However, there is a datepicker in the Workplace that only works if you hit refresh the page. AKA only work if the static code runs. If the Workplace table is generated through Ajax, the datepicker doesnt work.

Here is my code:


    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>


    $x = 0;
    foreach ($_SESSION['working'] as $ItemInWorking) {
    echo '<div class= "changeDate" class="input-group date mt-1">';
         echo '<input type="text" class="form-control" class="datepicker" id="datepicker{$x}" placeholder="{$ItemInViewing['EFFECTIVE_DATE']}" value="{$ItemInViewing['EFFECTIVE_DATE']}">';
    echo '</div>';
    $x++

}

<!-- Script for Datepicker  -->
<script type="text/javascript">
    $("body").on("click", ".changeDate", function(){
    // $(document).ready(function() {
        $('[id^=datepicker]').datepicker({
            format: "dd-M-yy",
            startDate: "yesterday",
            todayBtn: true,
            autoclose: true,
            todayHighlight: true
        });
        return false;
    });
</script>

Did I do something wrong? Please help. Any help is appreciated!

EDIT:

console does not give me any error. it just that when I get Item, the table is created, but when i click to change date, the Calendar does not show up.

I would have to refresh the page, aka, let the static code run, then I can click and see the calendar. But i also have to click twice?..

Does F12 key developer console in the web browser show errors or warnings? — Dave S, Apr 03 '19 at 19:36
jQuery is only aware of the elements in the page at the time it runs, so new elements added to the DOM are unrecognized by jQuery. To combat the problem use [event delegation](http://learn.jquery.com/events/event-delegation/), bubbling events from newly added items up to a point in the DOM which was there when jQuery ran on page load. Many people use `document` as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally [you should delegate to the nearest parent existing at the time of page load.](http://stackoverflow.com/a/12824698/1011527) — Jay Blanchard, Apr 03 '19 at 19:41
@JayBlanchard yes, i understand, and i am using 'body' and on(), but it still doenst work — Huy Nguyen, Apr 03 '19 at 19:43
@akshithDayanand there is no error, it just that when I click to the "div class = changeDate", the calendar does not show up if the table is genereated vis Ajax — Huy Nguyen, Apr 03 '19 at 19:44
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — miken32, Apr 03 '19 at 19:45

score 1 · Accepted Answer · answered Apr 03 '19 at 19:44

Calling this

        $('[id^=datepicker]').datepicker({
        format: "dd-M-yy",
        startDate: "yesterday",
        todayBtn: true,
        autoclose: true,
        todayHighlight: true
    });

basically ataches datepicker to all elements with id datepicker that are currently on the page. So call this when page loads.
(the javascript library ataches its own onclick handler to those elements)
Also call this in the ajax success after the inputs are inserted into the page.This should atach datepicker to newly insterted elements with datepicker id.
You dont have to call this code onclick like you are doing right now, this just ataches unnecesary click handlers.

I would also advice to use class instead of id to select all datepickers, your code will be more readable and it would help you save hassle in the future when adding another datepicker that would not have id like this. (Instead you would just add class to it)

@HuyNguyen I actually encountered this issue in a project, just not with datepicker but with a selectpicker javascript so i spend some time trying to figure this one out :D — matri70boss, Apr 03 '19 at 20:05
@HuyNguyen i would advice to accept this answer as correct one since it helped you and it may help someone in the future — matri70boss, Apr 04 '19 at 07:39

Script not working after Ajax loaded content

1 Answers1