Improve company productivity with a Business Account.Sign Up

x
?
Solved

pass linebreaks through ajax to server from a content editable div

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
These days, all we hear about hacktivists took down so and so websites and retrieved thousands of user’s data. One of the techniques to get unauthorized access to database is by performing SQL injection. This article is quite lengthy which gives bas…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.

579 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