Solved

pass linebreaks through ajax to server from a content editable div

Posted on 2015-01-04
2
126 Views
Last Modified: 2015-01-05
I've used editable for my div in order to make it easy to edit the contents of a web page but when the text is sent to the server using ajax the line breaks have been removed.   What's worse, I can't even detect them using a regular expression.   I've tried many combinations:

            alert($(this).siblings("#body_121").text().replace(/<br>/gm, 'xxx'));
            alert($(this).siblings("#body_121").text().replace(/\n/gm, 'xxx'));
            alert($(this).siblings("#body_121").text().replace(/the/g,"**the**"));
            alert($(this).siblings("#body_121").text().replace(/<br?\/>/g,"break"));
            alert($(this).siblings("#body_121").text().replace(/\r\n/g,"**rn***"));
            alert($(this).siblings("#body_121").text().replace(/\n\r/g,"**nr***"));
            alert($(this).siblings("#body_121").text().replace(/\n/g,"**nnn***"));
            alert($(this).siblings("#body_121").text().replace(/\r/g,"**rrr***"));
            alert($(this).siblings("#body_121").text().replace(/<br>/g,"**rrr***"));
            alert($(this).siblings("#body_121").text().replace(/\r\n|\r|\n/g,"\n"));
            alert($(this).siblings("#body_121").text().replace(/\n\r?/g, 'xxxxx%0D%0A'));
            alert($(this).siblings("#body_121").text().replace(/\x0A/g, '0a'));
            alert($(this).siblings("#body_121").text().replace(/\x0D/g, '0a'))

None of these works detects any line breaks.   Each alert just shows the string without line breaks.  
If i use firebug I can see the linebreaks being added
mmmmm
<br>
<br>
mmmmm
every time I hit enter a new linebreak is added.   I can detect any other character  but even this detects nothing:
alert($(this).siblings("#body_121").text().replace(/[^m]/g, 'xxx'))

If i add any other character it detects it. such as:

 mmmmmgmmm

the g will show up as:

mmmmmxxxmmm
0
Comment
Question by:vrosas_03
2 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40530239
If you are using contenteditable="true" in a div, and you can wrap the content in <p> tags. Each time you add a return, <p></p> tags are inserted. Then you can just look for the <p> tags in the content to mark the line feeds. Or just send the inner html to the server and the <p> tags will be preserved. If you don't wrap the content of the editable div in <p> tags, some browsers (like Firefox) will insert a <br> in the DOM, but you cannot rely on that.

Test: http://jsfiddle.net/zg7bgn0n/
0
 

Author Closing Comment

by:vrosas_03
ID: 40532553
My main problem was that I was using jQuery.text() rather than jQuery.html to grab the data.  I'll use the advice though to use <p> tags.  Hopefully they will stay during all stages from page to database and back again.  That would simplify using an contenteditable.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer tools in browsers have been around for a while, yet they are still heavily underused by developers. Developers still fix html or CSS then refresh page to see effect, or they put alert or debugger in JavaScript and then try again and again …
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question