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
– Dave S, Commented Apr 3, 2019 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, 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. — Jay Blanchard
– Jay Blanchard, Commented Apr 3, 2019 at 19:41

matri70boss · Accepted Answer · 2019-04-03 19:44:49Z

1

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)

answered Apr 3, 2019 at 19:44

matri70boss

3472 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

matri70boss Over a year ago

@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 Over a year ago

@HuyNguyen i would advice to accept this answer as correct one since it helped you and it may help someone in the future

Collectives™ on Stack Overflow

Script not working after Ajax loaded content

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related