Question

Im trying to make this work with jQuery

var ng = $.get('/static/views/ng.html');
$('#myHeader').insertBefore(ng);

the ng.html contains this

<div id="ng">
    <div class="c all"></div>
    <div class="f all"></div>
    <div class="p all"></div>
</div>

It doesn’t trow any error or so, I figure that it is the $.get that doesn’t return a correct object but don’t know how to continue.

Any ideas?

Thanks

Answer 1

As the request is asynchronous, what is returned is a promise, not the result (not yet existing) of the query.

The idiomatic solution is to pass a callback to get, this callback being called when the result of the query is available :

$.get('/static/views/ng.html', function(html) {
    $(html).insertBefore('#myHeader');
});

You can also use the returned object, the promise, in this equivalent way :

$.get('/static/views/ng.html').success(function(html) {
    $(html).insertBefore('#myHeader');
});

Note that I also inversed the receiver and argument of insertBefore.