Can't get carriage returns in div

Discussion in 'Javascript' started by mattrapoport@gmail.com, Jun 22, 2006.

  1. Guest

    I have a page with a div on it. The div displays a user comment. When
    the user logs into this page, their current comment is pulled from a db
    and displayed in the div. The user can edit the comment through a
    pop-up that contains a textarea. When the user hits OK on the pop-up,
    the text in the textarea is sent to a function on the main page. The
    function inserts the text into the div's text node.

    Please don't ask why I'm making this so complicated - there are other
    things going on on the page and the pop-up that are irrelevant to my
    problem.

    Everything works perfectly except when the user puts carriage returns
    in their comment. For some reason I can't get the carriage returns to
    show up in the div. BUT! When they view the existing comment in the
    div (the one pulled from the database) the carriage returns are
    displayed. That initial display does not use any javascript - it's
    just php so the page is initially rendered with the text in the div.

    So it seems that when I programmatically put text into my div, the
    carriage returns don't show. But if the page is rendered with the text
    already there, the carriage returns do show.

    This seems like it should be so simple, what am I doing wrong??? Do I
    have to replace the carriage returns with a different character (e.g.
    <br>, \n, \r, \n\r, \r\n)? Or is there a css setting for the div?

    Any help would be greatly appreciated.

    - Matt
    , Jun 22, 2006
    #1
    1. Advertising

  2. Ivo Guest

    <> schreef
    > Please don't ask why I'm making this so complicated - there are other
    > things going on on the page and the pop-up that are irrelevant to my
    > problem.


    But may I ask why ...oh well.

    > Everything works perfectly except when the user puts carriage returns
    > in their comment. For some reason I can't get the carriage returns to
    > show up in the div. BUT! When they view the existing comment in the
    > div (the one pulled from the database) the carriage returns are
    > displayed. That initial display does not use any javascript - it's
    > just php so the page is initially rendered with the text in the div.


    Look at the HTML source produced by the PHP. What carriage returns? Are they
    <br/> tags, or perhaps <p>, or is the div styled with "whitespace:pre"
    (which might be a solution towards your question)?

    > This seems like it should be so simple, what am I doing wrong??? Do I
    > have to replace the carriage returns with a different character (e.g.
    > <br>, \n, \r, \n\r, \r\n)? Or is there a css setting for the div?


    If you 're using the innerHTML property of the div to insert the new
    content, then
    something like thestring.replace( /\r?\n/g, '<br>' ) might just be enough,
    yes. A more standards-compliant appraoch might involve splitting the string
    into an array and <p> elements for every bit.
    Have you tried any of that replacing? What happened?
    ivo
    Ivo, Jun 22, 2006
    #2
    1. Advertising

  3. Guest

    Ivo wrote:
    > <> schreef
    > > Please don't ask why I'm making this so complicated - there are other
    > > things going on on the page and the pop-up that are irrelevant to my
    > > problem.

    >
    > But may I ask why ...oh well.
    >
    > > Everything works perfectly except when the user puts carriage returns
    > > in their comment. For some reason I can't get the carriage returns to
    > > show up in the div. BUT! When they view the existing comment in the
    > > div (the one pulled from the database) the carriage returns are
    > > displayed. That initial display does not use any javascript - it's
    > > just php so the page is initially rendered with the text in the div.

    >
    > Look at the HTML source produced by the PHP. What carriage returns? Are they
    > <br/> tags, or perhaps <p>, or is the div styled with "whitespace:pre"
    > (which might be a solution towards your question)?
    >
    > > This seems like it should be so simple, what am I doing wrong??? Do I
    > > have to replace the carriage returns with a different character (e.g.
    > > <br>, \n, \r, \n\r, \r\n)? Or is there a css setting for the div?

    >
    > If you 're using the innerHTML property of the div to insert the new
    > content, then
    > something like thestring.replace( /\r?\n/g, '<br>' ) might just be enough,
    > yes. A more standards-compliant appraoch might involve splitting the string
    > into an array and <p> elements for every bit.
    > Have you tried any of that replacing? What happened?
    > ivo



    In the HTML source produced by the PHP the new line character used is
    <br>. It works like a charm. When I replace \n and/or \r with <br>,
    the <br> is displayed in the text - it is not processed as a new line.

    I've tried pretty much every permutation of string.replace. No luck
    yet.

    Also, I'm not using innerHTML (trying to stay w3c compliant). I'm
    directly changing the value of the text node within the DIV.

    - Matt
    , Jun 22, 2006
    #3
  4. Ivo Guest

    <> schreef
    > Ivo wrote:
    >> <> schreef

    > In the HTML source produced by the PHP the new line character used is
    > <br>. It works like a charm. When I replace \n and/or \r with <br>,
    > the <br> is displayed in the text - it is not processed as a new line.

    <snip>
    > I'm not using innerHTML (trying to stay w3c compliant). I'm
    > directly changing the value of the text node within the DIV.


    The <br> is not a character, it 's four characters that make up a tag, some
    say, or an element, say others. In any case, if it 's fed into a textnode,
    well, yes, it will be treated as text, four characters of it.
    What you want to do is:
    - split your text into pieces at every occurance of a \n in the textarea
    (carriage return)
    - loop through the pieces, and in the loop:
    - - add them to the div using document.createTextNode one by one
    - - add a document.createElement( 'br' ) after each one

    Or like I said earlier, create a series of <p> elements.
    Example code, using a textarea but not in a popup, follows:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html><head><title>Title goes here</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">//<![CDATA[
    function addtext() {

    var s = document.getElementById( 'thetext' ).value.split( /\n/ ), i = 0,
    d = document.getElementById( 'thediv' );

    while( d.firstChild ) { d.removeChild( d.firstChild ); }
    // This clears any text previously added; remove the line and
    // the div will continue to grow each time the function is run.

    do {
    d.appendChild( document.createTextNode( s[i++] ) );
    d.appendChild( document.createElement( 'br' ) );
    } while( s );

    }
    //]]></script>
    </head><body>

    <div>
    <textarea rows="4" cols="40" id="thetext">
    Line one

    This is the thid line.
    </textarea>
    <input type="button" value="Set text" onclick="addtext();"/>
    </div>
    <div id="thediv">
    </div>

    </body></html>

    Watch out during testing that you do not accidentally create infinite loops
    in the 'do-while' block. It 's tricky construct. A loop that uses 'for' is
    usually safer, but slower. Another increase in speed and efficiency might be
    achieved by copying nodes using the cloneNode method instead of the repeated
    calls to createTextNode and createElement. The worth of these considerations
    does depend on the kind of the texts you expect from your users.
    In any case, try to avoid the pop up window.
    hth
    ivo
    http://4umi.com/web/javascript/
    Ivo, Jun 22, 2006
    #4
  5. wrote:

    [snip]
    > I've tried pretty much every permutation of string.replace. No luck
    > yet.


    > Also, I'm not using innerHTML (trying to stay w3c compliant). I'm
    > directly changing the value of the text node within the DIV.


    Changing the text node may be why you are having no luck. If you
    insert "<br>" in the text node, then it will not be parsed as a BR
    element, it will simply become - &lt;br&gt; - and show up as content
    rather than mark-up.

    Some options are:-

    1. Try creating a PRE element and inserting the text as a Text node
    of the PRE element, although I think Internet Explorer still strips out
    \n\r when programmatically inserted into text nodes.

    2. Use innerHTML

    This is relatively widely supported in the latest browsers I think.

    In which case when moving text from the textarea you will need to first
    escape the text by replacing all "<" ">" and "&" characters in the
    inputted text (so they are not wrongly seen as markup) and secondly do
    the replace for \n and \r to <br>.

    3. Manually create a series of Text and BR nodes.

    I.e. split the user input with:-

    var aLines=myString.split(/\r\r|\n\r|\r\n|\r|\n/)

    and then for each line insert
    - a Text node, and then a BR node,
    - or alternatively a P node containing a Text node.

    Regards

    Julian Turner
    Julian Turner, Jun 22, 2006
    #5
  6. Guest

    Tony wrote:
    > Julian Turner wrote:
    > > wrote:
    > >
    > > Some options are:-
    > >
    > > 2. Use innerHTML
    > >
    > > This is relatively widely supported in the latest browsers I think.

    >
    > All the major browsers support it. They may differ slightly as to
    > exactly how they implement it - but for this sort of use, I doubt you'll
    > notice any difference.
    >
    > It has the additional advantages of (a) being faster, and (b) using less
    > code.
    >
    > --
    > "The most convoluted explanation that fits all the available and made-up
    > facts is the most likely to be believed by conspiracy theorists"



    Thanks to everyone for their helpful remarks. As an aside, this is the
    first time I have ever seen posts on a web-related newsgroup
    recommending a non-standards compliant solution!

    But your arguments are compelling and I'm going to make the switch to
    innerHTML. Thanks again!

    - Matt
    , Jun 22, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Iceberg

    Carriage Returns and sockets

    Iceberg, Sep 6, 2003, in forum: Perl
    Replies:
    1
    Views:
    1,123
    Iceberg
    Sep 6, 2003
  2. Schroeder
    Replies:
    1
    Views:
    515
    Jim Gibson
    Jan 26, 2005
  3. Mario Vargas

    Replacing Carriage Returns in VB.NET

    Mario Vargas, Oct 21, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    14,441
    Dragos Marian Barbu
    Nov 10, 2003
  4. carriage returns get lost

    , May 12, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    376
  5. Steve Anderson
    Replies:
    3
    Views:
    230
    Steve Anderson
    Jun 21, 2004
Loading...

Share This Page