How do you load a Javascript file inside of the success function for $.ajax()?

Question

I am using jQuery's $.ajax() to get some data. I'd like to include that data in a popover dialog. I'm using the Twitter Bootstrap popovers.

It's not working; I believe the problem is that the JS for the popovers gets loaded before the data arrives.

How do I do something like:

<script src="{{ STATIC_URL }}js/bootstrap-popover.js"></script>

inside of my $.ajax() success function?

var request = $.ajax({
    url: requestUrl,
    dataType: "jsonp",
    success: function(data) {
       ...
    }

Answer 1

In trying to offer you a better solution, your tentative conclusion doesn't make sense to me. You should be able to include the popover javascript long before your ajax call and then use code to actually invoke the popover or configure it on any newly added content in your success handler.

There is no reason I'm aware of to load the popover js inside the success handler. Load it beforehand (in the normal way you load your other scripts) and then use it in the success handler for your ajax call. To help with how you'd use the popover script, we'd need to know more about what you're trying to do with it.

Answer 2

you can use jQuery's $.getScript method:

success: function(data) {
  $.getScript("myurl/js/bootstrap-popover.js");
}