CODEWITHSUNDEEP
jquerypostline-breaks
Marty
Marty

Reputation: 483

Jquery post not keeping line breaks

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>

Upvotes: 2

Views: 1152

Answers (2)

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

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/

Upvotes: 1

Kafoso
Kafoso

Reputation: 554

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.)?

Upvotes: 0

Related Questions