Issues using $.ajax

Question

I want to load the lightbox javascript only when a certain condition is satisfied so I'm loading it using $.ajax like so:

$.ajax({ url: "../static/js/lightbox.js", dataType: 'script', cache: true, success: function() {
    alert('loaded');
    $("a.lightbox").lightbox({
        opacity: "0.6",
        width: "940"
    });
}});

I see the "loaded" alert but the lightbox does not work. However, when I load the file directly (script src) from the HTML, lightbox works. How do I fix this?

Many thanks for your help.

Answer 1

You'll want to use $.getScript() for this (shorter, but slightly different caching effect), for example:

$.getScript("../static/js/lightbox.js", function() {
  $("a.lightbox").lightbox({
    opacity: "0.6",
    width: "940"
  });
});

Answer 2

Does the script get properly downloaded? Do you see the 'loaded' alert? If I were you I would put an alert in lightbox.js to see if is properly executed after downloading. Also check for JavaScript errors.

Answer 3

hi, The issue is the js is not still part of the DOM. Its correct that you get the lightbox.js but its not ready for execution. To get a js file dynamically, you will have to use getScript method instead of ajax. Have a look at the API: http://api.jquery.com/jQuery.getScript/