ajax - Jquery .load() is not loading javascript in loaded content

Question

I know this has been asked many times but i'm yet to find a clear and helpful answer so I thought i'd write the question again in a clearer format?

The problem is when you use the .load() function and you have javascript that needs to run in the loaded file it doesn't work as I'm guessing the DOM has already loaded.

The easy way around this is to just load the javascript again inside the loaded file but If you have a lot of files that get loaded having javascript all over the place isn't very good practice.

Does any one know of a good way of doing this?

This is as close as I could get it to being reasonably tidy??

<a data-toggle="modal" data-target="#DIV" href="./ajax/file.php?id='.$row['id'].'"></a>


$("a[data-toggle='modal']").on('click', function() {
    var target, url;
    target = $(this).attr('data-target');
    url = $(this).attr('href');
    return $(target).load(url, function(responseText, statusText, xhr){
       if(statusText == "success"){
       // Re-initiate all required javascript if the load was successful.
           $(".datepicker").datepicker({
               changeMonth: true,
           changeYear: true,
           showOn: "both",
           buttonImage: "./assets/img/calendar.gif",
           buttonImageOnly: true,
           dateFormat: 'dd-mm-yy' 
        });
        }
        if(statusText == "error"){
            alert("There was a problem trying to load the page.");
        }
    });
});

Inside the file.php is simply a form that has fields that require things like datepicker etc. The load is working fine.

Answer 1

If I understood your question then I think you should wrap all of your javascript functions (that needs to be executed after every successful ajax call) inside a single function like

function initReady(){
    $(".datepicker").datepicker({...});
    // Other codes
}

and your document.ready event should be like following one

$(document).ready(function(){
    initReady();
});

and whenever you need to initialize some dynamic content after an ajax success call just call the initReady() function as following

initReady();

In your case you can just do it inside your success callback like the given code below

if(statusText == "success"){
   // Re-initiate all required javascript if the load was successful.
   initReady();    
}

So every time you don't have to write all javascript code inside your every ajax success callback function and also it'll save your time and keep your code clean.

Note : Once I've faced a problem using this approach only with a datePicker and it was that in a dynamically loaded page there was a datePicker input and it was not being initialized even after my initReady() function has been called and than I used setTimeout function to call my initReady() function

setTimeout(function(){ initReady() },10);

and it solved my problem. Hope it'll help you.