Solved

pass linebreaks through ajax to server from a content editable div

Posted on 2015-01-04
2
125 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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Basics of Drool Rule Engine with few samples 2 69
Microsoft Edge 9 101
Automatic Image Uploading 9 82
Web Fraud scenarios to PoC F5  web fraud prevention 7 38
New Relic: Our company recently started researching several products to figure out what were the best ways for us to increase our web page speed and to quickly identify performance problems that we may be having. One of the products we evaluated wa…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

803 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