Executing Javascript on return from Ajax

Question

My page makes an Ajax call which returns some HTML to embed in the page and a script to run, attaching JQuery tooltips to various elements of the embedded HTML. The HTML and script are returned as JSON objects by my Django backend, and appear OK in the page, but the Javascript doesn't seem to work when I evaluate it:

$.ajax({
 type: "GET",
 url: "/url/to/ajax",
 data: {
 "foo": bar
 },
 success: function (data) {
 $("#my-table").html(data['html']);
 // alert(data['script']); // this works: I can see the script
 eval(data['script']);
 },
 error: function () {
 $("#my-table").html('');
 }
});

The script itself looks like a series of expressions such as:

$(".foobar1").tooltip({
 content: "The <em>foo</em> to the <strong>bar</strong>.",
 tooltipClass: "tt-ref",
 show: null,
 close: function (event, ui) {
 ui.tooltip.hover(
 function () {
 $(this).stop(true).fadeTo(400, 1);
 },
 function () {
 $(this).fadeOut("400", function () {
 $(this).remove();
 })
 });
 }
});

where foobar1 is a class in the HTML just added to the #my-table HTML.

Can anyone see where I'm going wrong here? Both jquery and jquery-ui are loaded on my page.

• Omid Kamangar: Do you see any errors in developer tools' console?
• Roamer-1888: It's unconventional to deliver HTML and Javascript together in one AJAX response. The script looks to be static - can it not be delivered inside a function wrapper as part of the initial page load?
• xnx: @Ako No errors in the console, just no tooltips either.
• xnx: @Roamer-1888 - I can't deliver it on initial page load because I don't know which of the 27 foos will be clicked: when one is, I fetch 10-20 rows from a db table and attach tooltips to them. There are >1000 rows, so I don't want to statically define my tooltips for all of them.
• Roamer-1888: xnx, not knowing everything in advance is standard fare for javascript. I can see nothing to prevent a function being delivered on page load and invoked on the elements put in place by the HTML delivered by AJAX.

Answer 1

You don't need to eval anything, let browser execute it. For this create script element, set its content and append it to DOM:

success: function(data) {
 $("#my-table").html(data.html);
 $('<script>').html(data.script).appendTo('body');
},

Another, probably better option is to make script a part of the returned HTML.

• xnx: This also executes the Javascript, as I can tell by adding an alert() call; however, I'm still not seeing my tooltips. Can I be sure that the DOM has been updated by the time this execution is happening?
• dfsq: Yes, previous .html(data.html); is complete by that moment. Make sure your script works, targets correct selectors, not errors. Open console and execute the code from console when HTML is rendered for sure. Does the script works as expected?
• xnx: Thanks - this is helping: the script is being executed and adds the tooltips HTML to the page... the problem must be with the interaction between the elements and the tooltips...

Answer 2

You might try :

eval("data['script']");