javascript does not function after dom is updated

Question

I got a webpage that updates its content using ajax/json and handlebars. Now i want to use bootstrap-datepicker for my date fields, but after updating the DOM with handlebars, the javascript event does not work.

My javascript

$(function(){
var refresher = function () {
    $.getJSON( "{% url 'characters:journal_json' 1 %}", function(obj) {
        refresh_timer = obj.refresh_timer * 1000;
        setTimeout(refresher, refresh_timer);
        if (obj.content) {
            // do shit with content and data
            var source   = $("#JournalTemplate").html();
            var template = Handlebars.compile(source);
            var html    = template(obj.content);
            $("#JournalContent").replaceWith(html);
        }
    });
  };
  setTimeout(refresher, 300); // 0.3 seconds
});

$('.datepicker').datepicker({
    format: "mm-dd-yyyy",
    autoclose: true
});

Handlebars template (will be expanded after i solve this problem):

<form class="form-inline" action="" method="GET" id="FilterForm">
    <input class="form-control input-sm datepicker" id="id_end_date" name="end_date" type="text" value="05-26-2015" />
<button type="submit" class="btn btn-primary btn-sm">Filter</button>
</form>

R3tep · Accepted Answer · 2015-05-26T13:27:59.550

0

Try this way :

$('body').on('focus', '.datepicker', function () {
    $(this).datepicker({
        format: "mm-dd-yyyy",
        autoclose: true
    });
});

With on the event is also triggered for dynamic elements

edited May 26 '15 at 13:27

answered May 26 '15 at 13:05

R3tep

12,512
10
48
75

If you don't explain your downvote I can't improve my answer. – R3tep May 26 '15 at 13:08
You should explain what issue you are trying to avoid with this code (did not downvote) – Hacketo May 26 '15 at 13:09
This is not a reason to downvote this answer. It solve the issue. – R3tep May 26 '15 at 13:11
This is a comment to your post, not to your first comment. – Hacketo May 26 '15 at 13:12
Sorry, I downvoted then got distracted checking the API to see if one of the assumptions I'd made (see 3 in a bit) was actually correct. 1. The question is a duplicate of tons of already existing questions. 2. No explanation of what the problem is, what your code does, why that's correct. 3. Looks like you're re-initialising the plug-in every time an element is interacted with, which is a waste. – Anthony Grist May 26 '15 at 13:13
Lets see if i understand this. I only get the events on my already existing datepicker classes. so when i create new ones javascript doesnt pick those up. With your code, everytime a datepickerclass in the body gets focus, you run the datepicker function on that object? – Hans de Jong May 26 '15 at 13:14
@R3tep Stack Overflow is a Q&A site, with the goal of producing a useful repository of knowledge *for future readers*. The intention is to teach, not to just solve the problem. Posts that just look like "Try this: ``" are always a reason to downvote in my mind. – Anthony Grist May 26 '15 at 13:14
@AnthonyGrist I am agree with that but I think a comment is more appropriet. But when I see your ratio vote, I assum we don't have the same approch of this site. – R3tep May 26 '15 at 13:31

score 0 · Answer 2 · edited Jun 01 '15 at 12:00

First of all bootstrap uses jQuery, so please confirm that you are putting jQuery script before bootstrap.js. After that write your own script inside tag followed by self executing/ anonymous function, called as IIFE(Immediately Invoked Function Expression) in JavaScript. So, this is a good approach to write scripts always. Please try as below.

(function(){

----- Your Code ----

})();

And definitely you will get rid of all these. Thanks.

BabyDuck · Answer 3 · 2015-05-26T13:21:19.217

I did little trick, please try this,

$(function(){
var refresher = function () {
    $.getJSON( "{% url 'characters:journal_json' 1 %}", function(obj) {
        refresh_timer = obj.refresh_timer * 1000;
        setTimeout(refresher, refresh_timer);
        if (obj.content) {
            // do shit with content and data
            var source   = $("#JournalTemplate").html();
            var template = Handlebars.compile(source);
            var html    = template(obj.content);
            $("#JournalContent").replaceWith(html);

            bindDatepicker(); // *** Here I am binding again...
        }
    });
  };
  setTimeout(refresher, 300); // 0.3 seconds
});

function bindDatepicker() {
  $('.datepicker').datepicker({
     format: "mm-dd-yyyy",
     autoclose: true
  });
}

This code binds datepicker every time when HTML is updated. Hope it helps.

I think this awnser is more elegant as the body focus. Thanks — Hans de Jong, May 26 '15 at 13:17
Could you explain what it is that you've done? Rather than requiring people to play spot the difference between your code and the code in the question. It would also be useful to explain what the problem is with their original approach and why this solves it. — Anthony Grist, May 26 '15 at 13:18

javascript does not function after dom is updated

3 Answers3