Jquery post not keeping line breaks

Question

I have this javascript which posts data from various divs but I can't seem to get it to keep linebreaks.

I think it has to do with the fact that I use .text() on the content i find, which probably doesn't keep line breaks at all. I tried with .html() but that make all text written on a new line embeded in divs for some reason.

Code is as below:

<script type="text/javascript">

$(document).ready(function() {

    $("#actor_result").load('xml/actortoxml.php?owner=<?php echo $_SESSION['username'] . "&id=" . $_GET['id']; ?>');
    $('#save_editable').click(function() {
        var name = $(document).find('#actorname').text();
        var current = $(document).find('#currenthealth').text();
        var max = $(document).find('#maxhealth').text();
        var effects = $(document).find('#actoreffects').text();
        var notes = $(document).find('#actornotes').text();

        $.ajax({
            url: 'actor_profile.php',
            type: 'POST',
            data: {
                update: 'true',
                actorid: <?php echo $_GET['id']; ?>,
                actorname: name, currenthealth: current, maxhealth: max, actoreffects: effects, actornotes: notes
            },
            success : function() {
            // gets called when ajax request completes successfully
            $("#actor_result").hide().load('xml/actortoxml.php?owner=<?php echo $_SESSION['username'] . "&id=" . $_GET['id']; ?>').fadeIn(500);     
            },
            error : function(err) {
                // in case of error
                console.log(err);
                alert('error');
            }
        });
    });
});
</script>

Edit, this is the generated html from the xml file:

<div id="actor_result" style="display: block;">
    <!--?xml version="1.0"?-->

    <div class="row-fluid row span6 offset3">
        <div class="media well well-small">
            <a class="pull-left" href="#"><img class=
            "media-object img-circle circle128" src=
            "images/avatar/actor/Davius.png"></a>

            <div class="media-body page-header actor-profile">
                <div class="editable_name" contenteditable="true" id=
                "actorname">
                    <h4 class="media-heading">Davius</h4>
                </div><small><strong>awarnhag's minion</strong></small>
            </div><strong>Health:</strong>

            <div class="div_inline editable_hp" contenteditable="true" id=
            "currenthealth">
                17
            </div>/

            <div class="div_inline editable_hp" contenteditable="true" id=
            "maxhealth">
                20
            </div>hp
        </div>

        <h5><span class="label">Effects</span></h5>

        <div class="editable well well-small" contenteditable="true" id=
        "actoreffects">
            Mumblecore bushwick sed, nulla street art dolore delectus wolf
            american apparel artisan sriracha. Laboris seitan hoodie,
            freegan brooklyn letterpress adipisicing chambray mixtape id
            tofu organic butcher small batch. Art party carles readymade
            messenger bag williamsburg. Irony placeat sustainable, high
            life cillum yr sed vinyl pork belly messenger bag williamsburg
            VHS. Occaecat lo-fi readymade gluten-free 3 wolf moon. Ad tofu
            twee, blog nulla mumblecore gentrify brooklyn odio cliche
            selvage put a bird on it pork belly chillwave deserunt. Ea
            assumenda chillwave, keytar velit tumblr pour-over enim VHS
            mcsweeney's blog.aaaa
        </div>

        <h5><span class="label">Notes</span></h5>

        <div class="editable well well-small" contenteditable="true" id=
        "actornotes"></div>
    </div>
</div>

silly idea, but maybe try CSS: `* { white-space: pre }` per http://stackoverflow.com/a/656648/483371 — andytuba, Dec 06 '12 at 20:03
white-space doesn't work. I think it has to do with the javacript removing them via .text() — Marty, Dec 06 '12 at 20:30
Actually, the CSS was of help. In combination with replacing with BR:s the replacing had no effect until i applied white-space: pre on it =D — Marty, Dec 07 '12 at 16:36

Yury Tarabanko · Answer 1 · 2012-12-06T20:48:47.347

1

You can get innerHTML and manually replace all divs and brs;

$("#id").html()
        .replace(/<(br|p|div)[^>]*>/g, "\n")
        .replace(/<\/?\w+[^>]*>/g, "");

http://jsfiddle.net/tarabyte/GsECc/4/

edited Dec 06 '12 at 20:48

answered Dec 06 '12 at 20:28

Yury Tarabanko

44,270
9
84
98

However it seems it was not a flawless solution. I just tried pushing down parts of a paragraph a few rows and upon saving it did nothing and went back to the state it was before I edited it. – Marty Dec 06 '12 at 20:38
I've added more generic version of search pattern. – Yury Tarabanko Dec 06 '12 at 20:49

score 0 · Answer 2 · answered Dec 06 '12 at 20:06

0

It's hard to determine exactly what is going on from the snippet above.

Have you tried converting <br>-tags to "\n", or vice versa, either before you send (POST) the data or after you have received the data ($.load)? What tag type is "#actor_result" (div, textarea, input, etc.)?

answered Dec 06 '12 at 20:06

Kafoso

534
3
20

I'm not very familiar with javascript so it's hard to try new methods without getting help hehe. #actor_result is just an div in which the xml transformed by xsl to html is placed. #actornotes for example is an editable div inside the div with id "actor_result". – Marty Dec 06 '12 at 20:22

Jquery post not keeping line breaks

2 Answers2