Proper JSON Response Output inside Div

Question

Issue:

I'm pulling in data without a problem into a div, however, the text is not displayed as it should. The formatting gets stripped when the data is thrown into the div. Paragraphs are all just one just block of text. The odd thing is that within Firebug, if I inspect & change:

<div id="description">Lorem ipsum dolor...</div>

to

<pre id="description">Lorem ipsum dolor...</pre>

The entire block of text gets fixed - exactly as I need it! So now, if I go ahead & change the <div> to <pre> in the actual page & hit Refresh, the block of text still shows up. No Returns/Enters.

My Question:

What else do I need to do so that the incoming text is properly displayed? I have text items with Enter/Return keys, bullets, etc.

Expected Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis iaculis vestibulum. Fusce egestas lectus vitae lacus tempor vel tempus mauris facilisis. Fusce dignissim risus ut augue venenatis in lacinia enim scelerisque. Vivamus id sem tellus. Maecenas vel laoreet metus. Proin suscipit, eros a ornare tristique, tellus est consequat ipsum, sit amet cursus justo libero non massa. Morbi auctor congue est ut posuere. Curabitur aliquet metus eu eros faucibus porttitor. Duis lectus ligula, scelerisque ac eleifend quis, tempor condimentum nisl. Suspendisse bibendum, lorem vitae vulputate laoreet, turpis tellus congue odio, ac aliquam urna augue id sem. Quisque consequat ullamcorper lorem non auctor.

Maecenas fringilla, lacus vitae varius venenatis, elit risus rutrum mi, a consequat ipsum massa quis tortor. Phasellus eu risus quam. Maecenas sagittis magna et diam consequat molestie. Vivamus pharetra dictum augue, et sollicitudin ipsum fermentum vel. Cras aliquam lobortis lorem vel ornare. Integer fermentum nunc et turpis mattis sollicitudin. Fusce magna nibh, pellentesque posuere rutrum id, luctus viverra nibh. Donec in laoreet lorem. Sed auctor turpis vitae lectus dictum convallis. Nulla quam nulla, scelerisque quis eleifend imperdiet, pretium ut diam.

Actual Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis iaculis vestibulum. Fusce egestas lectus vitae lacus tempor vel tempus mauris facilisis. Fusce dignissim risus ut augue venenatis in lacinia enim scelerisque. Vivamus id sem tellus. Maecenas vel laoreet metus. Proin suscipit, eros a ornare tristique, tellus est consequat ipsum, sit amet cursus justo libero non massa. Morbi auctor congue est ut posuere. Curabitur aliquet metus eu eros faucibus porttitor. Duis lectus ligula, scelerisque ac eleifend quis, tempor condimentum nisl. Suspendisse bibendum, lorem vitae vulputate laoreet, turpis tellus congue odio, ac aliquam urna augue id sem. Quisque consequat ullamcorper lorem non auctor. Maecenas fringilla, lacus vitae varius venenatis, elit risus rutrum mi, a consequat ipsum massa quis tortor. Phasellus eu risus quam. Maecenas sagittis magna et diam consequat molestie. Vivamus pharetra dictum augue, et sollicitudin ipsum fermentum vel. Cras aliquam lobortis lorem vel ornare. Integer fermentum nunc et turpis mattis sollicitudin. Fusce magna nibh, pellentesque posuere rutrum id, luctus viverra nibh. Donec in laoreet lorem. Sed auctor turpis vitae lectus dictum convallis. Nulla quam nulla, scelerisque quis eleifend imperdiet, pretium ut diam.

My code:

index.php

var string = "itemNum=" + item + "&idNum=" + id;
$.ajax({
    type: "POST",
    url: "data.php",
    dataType: "json",
    data: string,
    success: function(output)
    {   
        $("#image").attr("src", "xml/"+output[0]);
        $('#description').html(output[1]);  
        //I've also tried: $('#description').text(output[1]);   
    }
});

data.php:

$getXML = simplexml_load_file("output.xml");

function getDesc($getXML){

    ...code....

    return array($img, $desc);  
}

$output = getDesc($getXML);
echo json_encode($output);

Using Firebug's Console Window:

Headers:

Content-Type application/json; charset=utf-8

etc....

Response:

["img/sun.jpg","Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis iaculis vestibulum. Fusce egestas lectus vitae lacus tempor vel tempus mauris facilisis. Fusce dignissim risus ut augue venenatis in lacinia enim scelerisque. Vivamus id sem tellus. Maecenas vel laoreet metus. Proin suscipit, eros a ornare tristique, tellus est consequat ipsum, sit amet cursus justo libero non massa. Morbi auctor congue est ut posuere. Curabitur aliquet metus eu eros faucibus porttitor. Duis lectus ligula, scelerisque ac eleifend quis, tempor condimentum nisl. Suspendisse bibendum, lorem vitae vulputate laoreet, turpis tellus congue odio, ac aliquam urna augue id sem. Quisque consequat ullamcorper lorem non auctor.\r\rMaecenas fringilla, lacus vitae varius venenatis, elit risus rutrum mi, a consequat ipsum massa quis tortor. Phasellus eu risus quam. Maecenas sagittis magna et diam consequat molestie. Vivamus pharetra dictum augue, et sollicitudin ipsum fermentum vel. Cras aliquam lobortis lorem vel ornare. Integer fermentum nunc et turpis mattis sollicitudin. Fusce magna nibh, pellentesque posuere rutrum id, luctus viverra nibh. Donec in laoreet lorem. Sed auctor turpis vitae lectus dictum convallis. Nulla quam nulla, scelerisque quis eleifend imperdiet, pretium ut diam."]

JSON:

Key 0 gives me "img/sun.jpg"

Key 1 gives me

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis iaculis vestibulum. Fusce egestas lectus vitae lacus tempor vel tempus mauris facilisis. Fusce dignissim risus ut augue venenatis in lacinia enim scelerisque. Vivamus id sem tellus. Maecenas vel laoreet metus. Proin suscipit, eros a ornare tristique, tellus est consequat ipsum, sit amet cursus justo libero non massa. Morbi auctor congue est ut posuere. Curabitur aliquet metus eu eros faucibus porttitor. Duis lectus ligula, scelerisque ac eleifend quis, tempor condimentum nisl. Suspendisse bibendum, lorem vitae vulputate laoreet, turpis tellus congue odio, ac aliquam urna augue id sem. Quisque consequat ullamcorper lorem non auctor. Maecenas fringilla, lacus vitae varius venenatis, elit risus rutrum mi, a consequat ipsum massa quis tortor. Phasellus eu risus quam. Maecenas sagittis magna et diam consequat molestie. Vivamus pharetra dictum augue, et sollicitudin ipsum fermentum vel. Cras aliquam lobortis lorem vel ornare. Integer fermentum nunc et turpis mattis sollicitudin. Fusce magna nibh, pellentesque posuere rutrum id, luctus viverra nibh. Donec in laoreet lorem. Sed auctor turpis vitae lectus dictum convallis. Nulla quam nulla, scelerisque quis eleifend imperdiet, pretium ut diam."

Output:

console.log("Image = " + output[0]);

Image = img/sun.jpg

console.log("Description = " + output[1]);

Description = Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis iaculis vestibulum. Fusce egestas lectus vitae lacus tempor vel tempus mauris facilisis. Fusce dignissim risus ut augue venenatis in lacinia enim scelerisque. Vivamus id sem tellus. Maecenas vel laoreet metus. Proin suscipit, eros a ornare tristique, tellus est consequat ipsum, sit amet cursus justo libero non massa. Morbi auctor congue est ut posuere. Curabitur aliquet metus eu eros faucibus porttitor. Duis lectus ligula, scelerisque ac eleifend quis, tempor condimentum nisl. Suspendisse bibendum, lorem vitae vulputate laoreet, turpis tellus congue odio, ac aliquam urna augue id sem. Quisque consequat ullamcorper lorem non auctor.

Maecenas fringilla, lacus vitae varius venenatis, elit risus rutrum mi, a consequat ipsum massa quis tortor. Phasellus eu risus quam. Maecenas sagittis magna et diam consequat molestie. Vivamus pharetra dictum augue, et sollicitudin ipsum fermentum vel. Cras aliquam lobortis lorem vel ornare. Integer fermentum nunc et turpis mattis sollicitudin. Fusce magna nibh, pellentesque posuere rutrum id, luctus viverra nibh. Donec in laoreet lorem. Sed auctor turpis vitae lectus dictum convallis. Nulla quam nulla, scelerisque quis eleifend imperdiet, pretium ut diam.

use a replace function in php or js to replace the new line marks with <br>. in php it's nl2br($text) — unloco

peacemaker peacemaker · Accepted Answer · 2012-08-08T23:02:19

The JSON data containing the text has no markup in up so when you use the .html() function to set the <div> content it is working as expected.

You'll have to save any markup used to create things like paragraphs <p> and bullets <ul> etc. as part of your text. i.e. the raw data from your XML file must also include these tags along with the text.

Taking your example from above, the JSON should look like this:

JSON:

Key 0: "img/sun.jpg"

Key 1: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis iaculis vestibulum. Fusce egestas lectus vitae lacus tempor vel tempus mauris facilisis. Fusce dignissim risus ut augue venenatis in lacinia enim scelerisque. Vivamus id sem tellus. Maecenas vel laoreet metus. Proin suscipit, eros a ornare tristique, tellus est consequat ipsum, sit amet cursus justo libero non massa. Morbi auctor congue est ut posuere. Curabitur aliquet metus eu eros faucibus porttitor. Duis lectus ligula, scelerisque ac eleifend quis, tempor condimentum nisl. Suspendisse bibendum, lorem vitae vulputate laoreet, turpis tellus congue odio, ac aliquam urna augue id sem. Quisque consequat ullamcorper lorem non auctor. </p><p> Maecenas fringilla, lacus vitae varius venenatis, elit risus rutrum mi, a consequat ipsum massa quis tortor. Phasellus eu risus quam. Maecenas sagittis magna et diam consequat molestie. Vivamus pharetra dictum augue, et sollicitudin ipsum fermentum vel. Cras aliquam lobortis lorem vel ornare. Integer fermentum nunc et turpis mattis sollicitudin. Fusce magna nibh, pellentesque posuere rutrum id, luctus viverra nibh. Donec in laoreet lorem. Sed auctor turpis vitae lectus dictum convallis. Nulla quam nulla, scelerisque quis eleifend imperdiet, pretium ut diam.</p>"

Proper JSON Response Output inside Div

1 Answers