Using new lines in javascript jquery

Question

I am using

$('#'+type+'name'+id).hide().html('ghj').fadeIn(150);

Which works fine. But when I use

$('#'+type+'name'+id).hide().html('
A lot of html code
').fadeIn(150);

The function does not work anymore. Since I want to keep the function tidy I want to put the HTML there in multiple lines. Why doesnt this work?

EDIT: Still does not work:

function Rename(type,id,content){
$('#'+type+'name'+id).hide().html(' '+
    '   <td height=\"20\" valign=\"middle\">'+
    '       <span onclick=\"RenameDo(\'notify\',\''+id+'\',''+content+'')\">'+
    '           <img title=\"Wijzigen\" class=\"LinkImage\" src=\"/common/images/save.png\">'+
    '       </span>'+
    '   </td>'+
    '   <td valign=\"middle\" rowspan=2>&nbsp;fghfgh</td>'+
' ').fadeIn(150);

}

If you don't write the code it's hard to guess what is going on. — bgusach
– bgusach, Commented Mar 9, 2013 at 19:05
Post your expected HTML output, without all the escaped quotes. Does the function RenameDo takes strings as arguments? — ATOzTOA
– ATOzTOA, Commented Mar 9, 2013 at 19:20

ATOzTOA · Accepted Answer · 2013-03-09 19:22:18Z

4

Just use + to concatenate long strings:

$('#'+type+'name'+id).hide().html(' ' + 
'A lot of html code' +
' ').fadeIn(150);

Or use \ to escape newline:

$('#'+type+'name'+id).hide().html('\
A lot of html code\
').fadeIn(150);

Update

For the specific string, use this:

function Rename(type,id,content){
    $('#'+type+'name'+id).hide().html(' '+
        '   <td height="20" valign="middle">'+
        '       <span onclick="RenameDo(\'notify\',\'' + id + '\',\'' + content + '\')">' +
        '           <img title="Wijzigen" class="LinkImage" src="/common/images/save.png">'+
        '       </span>'+
        '   </td>'+
        '   <td valign="middle" rowspan=2>&nbsp;fghfgh</td>'+
    ' ').fadeIn(150);
}

edited Mar 9, 2013 at 19:22

answered Mar 9, 2013 at 19:06

ATOzTOA

36.1k23 gold badges101 silver badges119 bronze badges

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

13 Comments

Mbrouwer88 Over a year ago

Thanks! So javascript really looks where I put the "enter"? Annoying!

ATOzTOA Over a year ago

@Mbrouwer88 Isn't that how every language processes strings?

pwdst Over a year ago

@JanDvorak I actually got that from other Stack Overflow questions, including one that was no more than a few weeks ago. Google style guides recommend concatenation google-styleguide.googlecode.com/svn/trunk/… as the slash technique isn't part of ECMAScript.

ultranaut Over a year ago

Same comment as in @Kolink's answer, the escaped newline method can be pretty risky as any extra whitespace other than a newline immediately following the backslash will cause a SyntaxError: Unexpected token ILLEGAL

pwdst Over a year ago

@JanDvorak I thought I had read somewhere that it was being brought in in ECMAScript 6, although I may be wrong and you're right that it's already included in ECMAScript 5 - I'm not a JavaScript expert. I was simply quoting from the Google document. The debate on the two methods rages if you look at other SO questions and articles on the subject. In either case, the slash method hasn't always been part of the standard and you should take care to test in all browsers you intend to support/receive significant traffic from. Which was my original point.

|

Niet the Dark Absol · Accepted Answer · 2013-03-09 19:08:24Z

1

There are two ways to do this, the "hack way that works anyway", and the "proper way".

Hack way:

$("#"+type+"name"+id).hide().html("\
A lot of html code\
").fadeIn(150)

Explanation: By adding a backslash at the end of the line, you are effectively "escaping" the newline so it is ignored instead of an unterminated string constant.

Proper way:

$("#"+type+"name"+id).hide().html(
"A lot of html code\n"
+"Just adding some more\n"
+"Because whitespace outside of strings is fine."
).fadeIn(150)

answered Mar 9, 2013 at 19:08

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

7 Comments

John Dvorak Over a year ago

Note the escaped newline is removed, not treated as a newline characted

John Dvorak Over a year ago

I'm not sure I would call it a hack, as long as it's documented.

Niet the Dark Absol Over a year ago

It's actually never been defined in any standard, and I think strict mode will fail on it.

John Dvorak Over a year ago

The ES5 spec allows this explicitly, even in strict mode. SingleStringCharacter ::...\ LineTerminatorSequence

ultranaut Over a year ago

IMHO, the main problem with the first method -- escaped newlines -- is that any whitespace other than the newline, e.g. spaces, will cause a syntax error. It's pretty easy for extra white space to go unnoticed there.

|

Collectives™ on Stack Overflow

Using new lines in javascript jquery

2 Answers 2

13 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related