5 Replies Latest reply on Jun 6, 2012 12:49 AM by Sreeindia

    Break Line with JS

    Phinehas1234
    Phinehas1234 Jun 3, 2012 7:40 PM

      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?

      • 1634 Views
      • Tags:
        • 1. Re: Break Line with JS
          Sean Coyne
          Sean Coyne Jun 4, 2012 5:15 AM (in response to Phinehas1234)

          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.

          • 2. Re: Break Line with JS
            Phinehas1234 Level 1
            Phinehas1234 Jun 4, 2012 5:46 PM (in response to Sean Coyne)

            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.

            • 3. Re: Break Line with JS
              Sean Coyne Level 2
              Sean Coyne Jun 5, 2012 2:23 PM (in response to Phinehas1234)

              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.

              1 person found this helpful
              • 4. Re: Break Line with JS
                Phinehas1234 Level 1
                Phinehas1234 Jun 6, 2012 12:31 AM (in response to Sean Coyne)

                Thanks for your help.

                 

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

                • 5. Re: Break Line with JS
                  Sreeindia Level 1
                  Sreeindia Jun 6, 2012 12:49 AM (in response to Phinehas1234)

                  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