Skip to main content
A
Anonymous
June 4, 2012
Answered

Break Line with JS

  • June 4, 2012
  • 2 replies
  • 3167 views

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?

    This topic has been closed for replies.
    Correct answer

    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.


    Thanks for your help.

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

    2 replies

    Sreeindia
    Sreeindia
    Participating Frequently
    June 6, 2012

    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

    Sean Coyne
    Sean Coyne
    Participating Frequently
    June 4, 2012

    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.

    A
    Anonymous
    June 5, 2012

    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
    Sean Coyne
    Participating Frequently
    June 5, 2012

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices