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.

It will probably clarify your question if you include the response of "url" (i.e. the content loaded into "target"). — JoshNaro
– JoshNaro, Commented Mar 20, 2012 at 21:19
I think that you have an input that needs to be a datepicker text box and it's not working, am I right ? — The Alpha
– The Alpha, Commented Mar 20, 2012 at 21:48
Yes but it could be anything javascript i was just using datepicker as an example. — mylesthe.dev
– mylesthe.dev, Commented Mar 21, 2012 at 2:36

The Alpha · Accepted Answer · 2012-03-20 22:32:15Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related