?
Solved

pass linebreaks through ajax to server from a content editable div

Posted on 2015-01-04
2
Medium Priority
?
136 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 2000 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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

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

      Install BugTracker on Windows 2008 server Step 1:  Install windows 2008 server 32 bit OS and configure IIS. Step 2:  Install SQL server ( SQL server 2005 or SQL server 2005 Express edition. The installer for 2008  version isn’t very f…
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…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
Suggested Courses

593 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