Load partial html with javascript inside

Question

On my website I load html, which is rendered at the server (nodejs), and insert it at the right position (most time a div with id content).

How would I insert the received html on the client, so that included script tags are executed?

I am using on the client side underscore and handlebars. But vanillajs is also possible of course.

PS: Here is an example to show the difference between jQuery.html() and setting the innerHTML-property:

http://jsfiddle.net/waxolunist/VDYgU/3/

You can refer http://stackoverflow.com/questions/8825804/nodejs-ejs-partials-with-scripts-in-the-head and res.Render in http://expressjs.com/api.html#req.xhr — DeveloperBuddy, May 06 '13 at 18:45
You can render html with a callback responding. res.render('sometemplate', {layout: false}); — DeveloperBuddy, May 06 '13 at 19:06
But isn't res.render a serverside function, or how do I get the response object on the clientside? — Christian, May 06 '13 at 19:35

esp · Accepted Answer · 2013-05-08T18:18:06.440

3

with jQuery

$('div#content').html(loaded_html);

without:

getElementById('content').innerHTML = loaded_html;

While possible to do it your way, a better idea might be to send json and render pages in the browser using the same templates you (possibly) use in the server. I'm using doT, which I think to be the best of all JavaScript based templates (like EJS, underscore).

edited May 08 '13 at 18:18

answered May 08 '13 at 17:55

esp

7,314
6
49
79

Yes, I swiched to jquery before your answer already. It works actually different and so script get executed. InnerHTML does not work for me (Chrome 26). I accept your answer though. I am rendering the html serverside only in some cases not in all. On the client I am using depending on the use case handlebars. – Christian May 10 '13 at 15:15

score 0 · Answer 2 · answered May 06 '13 at 18:57

0

You could leverage jQuery to do that. Just with

$.load("#divname").load(url)

http://api.jquery.com/load/

answered May 06 '13 at 18:57

Thomas Junk

5,588
2
30
43

It loads the data into the DIV (innerHTML). It's a kind of sugar – Thomas Junk May 06 '13 at 19:49
I have on the client the html already. There is no url where the source resides. I load the content via websocket. – Christian May 06 '13 at 20:15

score 0 · Answer 3 · edited Aug 17 '16 at 07:23

0

There is some problem with your character escaping, please use jshint. Otherwise it is pretty simple to use like

var script1 = "content for jQuery";
var script2 = "content for javascript";

$(document).ready(function (){
    $('#content1').html(script1);
    document.getElementById('content2').innerHTML = script2;
})

edited Aug 17 '16 at 07:23

AlexB

7,302
12
56
74

answered Jun 21 '15 at 11:35

shikhar chauhan

431
1
4
9

Load partial html with javascript inside

3 Answers3

Linked