Format html inside .html() tag

Question

In a JavaScript callback function, I am displaying a Success/Failure message on my page. When I have the HTML content in one line as in the below code the message is added and everything works!

$('#message').html("<div class='alert alert-danger'><i class='fa fa-times-circle fa-2x'>Incorrect!</div>")

But when I try to format the HTML for better readability, as in the below - nothing happens and I don't see the message that I am trying to add nor any error messages in the Firebug console.

 $('#message').html("<div class='alert alert-danger'>
                              <p><i class='fa fa-times-circle fa-2x'>
                                Incorrect! Yesterday was " + <%= @yesterday %> +
                             "</p>
                             <p>Click Next to continue.</p>
                         </div>")

I am not sure what the issue is, and any help is appreciated!

Add / at the end of each line, from ...lert-danger'> to ...to continue. — artm, Sep 24 '14 at 14:57
Yes js has problems with multiline text. You must add `/` at the end of every line as @artm said or concatenate each line — T00rk, Sep 24 '14 at 14:58
This is not related to html, but to the way JavaScript accepts multi-line strings in general. See: [Multi-Line JavaScript Strings](http://davidwalsh.name/multiline-javascript-strings) — GolezTrol, Sep 24 '14 at 15:05
possible duplicate of [Creating multiline strings in JavaScript](http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript) — Teemu, Sep 24 '14 at 15:12
Thanks! You will have to use the backslash \ and it seems to work. — learning_to_swim, Sep 24 '14 at 15:13

iCollect.it Ltd · Accepted Answer · 2014-10-30T09:32:27.593

With any complex HTML, do not use string concatenation or even string literals. They are a maintenance nightmare. e.g. Your i element is not terminated:

You can simple use a dummy script block with the desired HTML:

<script type="text/template" id="mytemplate">
    <div class='alert alert-danger'>
               <i class='fa fa-times-circle fa-2x'>Incorrect!</i>
    </div>
</script>

and use like this:

$('#message').html($('#mytemplate').html());

type="text/template" is not a valid value and the browser ignores this block (leaves it intact).

For your complex example you can see you can still inject ASP.Net content, only now the layout is obvious (and in the page, not your code, where it belongs):

<script type="text/template" id="mytemplate">
   <div class='alert alert-danger'>
       <p><i class='fa fa-times-circle fa-2x'>
           Incorrect! Yesterday was <%= @yesterday %>
          </i>
       </p>
       <p>Click Next to continue.</p>
   </div>
</script>

I sometimes use PHP to do something similar: keep templates in external files and inject them into variables with `json_encode()`. — Álvaro González, Sep 24 '14 at 15:15

score 1 · Answer 2 · answered Sep 24 '14 at 15:07

As far as I know, JavaScript does not allow literal carriage returns in string literals:

var foo = "Not
valid";

You have to replace them with escape sequences:

var foo = "Yes\nit's valid";

... good old string contatenation:

var foo = "Yes " + 
    "it's valid";

... or both:

var foo = "Yes\n" + 
    "it's valid";

Your code should trigger a clear syntax error:

SyntaxError: unterminated string literal

Make sure you actually check the console!

Edit: as GolezTrol's points out in this comment, you can actually use raw line feeds if you escape them (though you don't get the character itself in the string):

var foo = "Yes, \
it's valid too";

score 1 · Answer 3 · answered Sep 24 '14 at 15:14

1

I would construct your html variable separately first. e.g.

var text = 'Incorrect! Yesterday was " + <%= @yesterday %> + "';                          
var html = $('<div>').addClass('alert alert-danger').append(
               $('<p>').append(
                   $('<i>').addClass('fa fa-times-circle fa-2x')
                           .text(text)
                   )
               )
               ...
           );

And then call

$('#message').html(html);

At least it saves you having to specify and maintain a separate template.

answered Sep 24 '14 at 15:14

ne1410s

6,864
6
55
61

You still have the issue of injecting the ASP.net value (`<%= @yesterday %>`) – iCollect.it Ltd Sep 24 '14 at 15:14
I see your correction, but now you have the issue that the jQuery must always be in the page (also a maintenance/debugging problem). – iCollect.it Ltd Sep 24 '14 at 15:18

score 1 · Answer 4 · answered Sep 24 '14 at 15:17

Use this tool. The UI is a bit overwhelming at first but its a life saver: http://rishida.net/tools/conversion/

Paste your html inside the HTML box and hit "convert" button, then copy the resulting code from the "javascript escape" box on the bottom. This is the code you should be passing to the .html() as argument.

score 0 · Answer 5 · answered Sep 24 '14 at 15:20

Or you can use a function to do that.

function getErrorMessage(pMessage){
  return "<div class='alert alert-danger'>"
       + "<p><i class='fa fa-times-circle fa-2x'>"
       +  pMessage
       + "</i></p></div>";
}

Than you can call like that:

$('#message').html(getErrorMessage('Incorrect! Yesterday was <%= @yesterday %>.'));

And you can change/improve the "getErrorMessage" to receive more parameters and change the icon etc. Hope it's helpfull.

Format html inside .html() tag

5 Answers5