CODEWITHSUNDEEP
javascriptjqueryhtml
learning_to_swim
learning_to_swim

Reputation: 361

Format html inside .html() tag

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!

Upvotes: 2

Views: 2404

Answers (5)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

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>

Upvotes: 5

Fernando
Fernando

Reputation: 113

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.

Upvotes: 0

Melissa Hie
Melissa Hie

Reputation: 471

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.

Upvotes: 1

ne1410s
ne1410s

Reputation: 7082

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.

Upvotes: 1

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146390

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

Upvotes: 1

Related Questions