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.

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? — Roamer-1888
– Roamer-1888, Commented Mar 5, 2015 at 20:20
@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. — xnx
– xnx, Commented Mar 5, 2015 at 20:25
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. — Roamer-1888
– Roamer-1888, Commented Mar 5, 2015 at 20:46

dfsq · Accepted Answer · 2015-03-05 20:23:19Z

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.

answered Mar 5, 2015 at 20:23

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

xnx Over a year ago

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 Over a year ago

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 Over a year ago

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...

Raishul · Accepted Answer · 2015-03-05 20:32:08Z

0

You might try :

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

answered Mar 5, 2015 at 20:32

Raishul

1562 silver badges6 bronze badges

Collectives™ on Stack Overflow

Executing Javascript on return from Ajax

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related