Avoiding HTML-in-string / html() in a jQuery script

Question

I want to make a jQuery based custom popup window for my site using javascript.

I prototyped it by storing the HTML to go in the popup inside a javascript string variable and then display that string thus:

$('#pop_div').html(string);

where string is defined thus:

var string= '<div class="className">' +
    'HTML Content'+
'</div>'

I've seen a few websites that do this but think it is incorrect.

It works for static html snippets but not for rails generated html using <%= .. %>

What is the best way of loading HTML code generated by rails into a javascript/jquery script?

thanks

according to stackoverflow.com/questions/1071386/… this does work. Can someone confirm? — Nick Ginanto
– Nick Ginanto, Commented Nov 9, 2011 at 18:32

Community · Accepted Answer · 2017-05-23 12:21:11Z

2

It is fine to do

<script>var string = <%= escape_javascript(...) =>;</script>

since the escape_javascript does the work of ensuring that the original string will be interpreted properly by the JavaScript interpreter.

See Why escape_javascript before rendering a partial? for more discussion.

Note, that if you want to put this in an onclick handler instead of inside a <script> element you may need to escape_javascript and then HTML escape the result.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Nov 9, 2011 at 18:33

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

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

Comments

James Johnson · Accepted Answer · 2011-11-09 18:37:27Z

0

It would be easier to store the element in a variable:

var el = $("<div class='className' />").html("HTML Content");

//append the element to the div
$("#pop_div").append(el);

answered Nov 9, 2011 at 18:37

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

Comments

artlung · Accepted Answer · 2011-11-09 18:44:33Z

0

How about in 3 steps:

var htmlContent = 'HTML Content';

var elem = $('<div />').addClass("className").html(htmlContent);

$('#pop_div').empty().append(elem);

Now, I've only done "hello world" with RoR, but use Mike Samuel's escape_javascript code and that might address your needs.

answered Nov 9, 2011 at 18:44

artlung

33.5k19 gold badges76 silver badges124 bronze badges

Collectives™ on Stack Overflow

Avoiding HTML-in-string / html() in a jQuery script

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related