Break Line with JS

[Guest]

Hi,

I use cfset to set a message with several lines using "\n" in CFC. For example:

<cfset message = message & #JSStringFormat(namelist.name)# & '\n'>

Then, when I use alert('#message#') in CFC, it shows the message with several lines correctly.

Then, I use:

document.getElementById('nameList').innerHTML = '#message#';

to return the name list to CFM page.

However, when I use alert(document.getElementById('nameList').innerHTML) in CFM, it shows message incorrectly. it only shows me all name with a delimiter " ".

It seems the line break character "\n" cannot work correctly. Can anyone help me to solve this problem?

[Sean Coyne]

Once you set the innerHTML property then read it, you get back HTML not a Javascript string.  If you want line breaks in HTML then you use the <br> tag.

[Guest]

I have tried both \n and <br/>, they also cannot show correctly.

For example, if my list is A, B, C

1) \n will show A B C

2) <br /> will show A<BR>B<BR>C

But what I want is:

A

B

C

Is there any method to do it well?

I have tested it in Google Chrome, it run correctly with "\n". But my company use IE 8. IE 8 fails to do it.

[Sean Coyne]

Ok, so innerHTML returns HTML, but alert expects a javascript string.  In order for a Javascript string to show new lines you need the \n char.  But once you set the innerHTML property those are replaced with actual new line characters.  So when you read the innerHTML property to get the actual chars back.  So, you need to replace those chars with \n on the javascript side. (This is what jsStringFormat is doing for you on the server side)

Do you follow?  You are getting the actual newline chars back but the Javascript alert needs the \n special character to display them.

You might have better luck using an HTML modal window and just displaying the HTML as is rather than use an alert();  Most people shy away from using alert as its not very user friendly.  Something like the jQuery UI Dialog widget would work but I'm not sure if you are comfortable enough with Javascript.

[Guest · Accepted solution]

Thanks for your help.

Lastly, I find that I can use innerText to solve the problem.

[Sreeindia]

Hi

InnerHTML is not an issue always. Please have a look into the following code. I could show the display with line break

<cfset message = "Welcome">

<cfset names = arraynew(1)>

<cfset count = 1>

<cfloop index="loopcount" from=1 to=12>

    <cfset names[loopcount]=count>

    <cfset count = count + 1>

</cfloop>

<cfloop array="#names#" index="name">

    <cfset message = message & ' ' & #JSStringFormat(name)# & '<br>'>

</cfloop>

<p id="test"></p>

<script language="javascript" type="text/javascript">

    alert(document.getElementById("test"))

    document.getElementById("test").innerHTML = '<cfoutput>#MESSAGE#</cfoutput>';

</script>

Please let me know which html ctrl you are using the message to be displayed

Regards

Sreekar