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!

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!

• javascript
• jquery
• html

• 2 Add / at the end of each line, from ...lert-danger'> to ...to continue.</p> – artm Commented Sep 24, 2014 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 Commented Sep 24, 2014 at 14:58
• 1 This is not related to html, but to the way JavaScript accepts multi-line strings in general. See: Multi-Line JavaScript Strings – GolezTrol Commented Sep 24, 2014 at 15:05
• possible duplicate of Creating multiline strings in JavaScript – Teemu Commented Sep 24, 2014 at 15:12
• Thanks! You will have to use the backslash \ and it seems to work. – learning_to_swim Commented Sep 24, 2014 at 15:13

5 Answers 5

With any plex 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 plex 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>

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 ment, 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";

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.

Use this tool. The UI is a bit overwhelming at first but its a life saver: http://rishida/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.

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.