jquery parseHTML not working as expected

Question

I'm getting json data back from a jsonp call. The data is coming back alright. One data element is in the form of a string with some html in it ("p" tag, "a" tag). I'm trying to output this element (a picture description) within a jQuery dialog box. For some reason I can't get it to render as html, whether I use $.parseHTML or not.

Code snippet:

var image       = data.image;
var title       = data.title;
var id          = data.id;
var description = $.parseHTML( data.description );
var media       = data.media;
var secret      = data.secret;
if(media == "photo"){
    var string  = "<div id=\"picturebox\" class=\"picturebox\">\n";
    string += "    <img src=\""+image + "\" id=\"photo_"+id+"\" />\n";
    string += "    <h2>" + title + "</h2>\n";
    string += "    <p>" + description + "</p>\n";
    string += "</div>\n";
    $('#gbFullPic').html(string);
}

Although the dynamically produced div correctly displays, including the image and title, the "description" line outputs like this: [object Text]

If I remove the $.parseHTML the output looks like this:

Bird of paradise growing in south Florida.<p><a href="http://www.popgnology.com/guestbook.php">ACME Adventures</a></p>

That would be alright of course, if my html output did not show the actual html tags. What am I doing wrong?

UPDATE (2nd revision): My previous solution was incomplete. The problem was more complicated than a single jquery or javascript solution.

The problem began on the server side, with badly formed html that was sent via

header('content-type: application/json; charset=utf-8');
echo $cid . '('.json_encode($data).')';

On the server side (PHP), I had to condition my "description" item, like so (note the addition of htmlspecialchars_decode and an addslashes wrapper):
```
  if($k == "description"){ 
    $data["$k"] = addslashes(htmlspecialchars_decode($v));
  }
  else{
    $data["$k"] = $v;
  }
```
Then, this javascript properly rendered the json data item:
```
var description   = data.description.replace('\\','');
```

With that two-step process of correcting the delivery format on the server page, and stripping slashes using a .replace on the client side, the "description" properly displays all text and html elements on the html page.

Mathijs Flietstra · Accepted Answer · 2013-09-18 11:55:38Z

5

Try var description = $($.parseHTML(data.description)).html();

jQuery's parseHTML returns an array of DOM nodes. You could then insert them into the DOM, but in your case you should get their .html() and add it to your string.

edited Sep 18, 2013 at 11:55

answered Apr 29, 2013 at 23:35

Mathijs Flietstra

13k3 gold badges42 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TARKUS Over a year ago

Thanks for the help, but using that gives me: Error: TypeError: $.parseHTML(...).html is not a function

user1954544 Over a year ago

the same "TypeError: jQuery.parseHtml is not a function" when try to use $.parseHtml() what can it be?

Mathijs Flietstra Over a year ago

@user1954544 - $.parseHTML should be a function if jQuery is loaded properly, I did realise just now when looking at it that my answer contained an error, I had forgotten to wrap the parseHTML output in a jQuery object (which is the source of the TypeError: $.parseHTML(...).html is not a function error, I've just fixed it in the answer.

Community · Accepted Answer · 2017-05-23 12:06:03Z

4

My guess is that your data.description is escaped and the method parseHTML isn't going to handle that. Check out this post for a solution:

Javascript decoding html entities

var text = '&lt;p&gt;name&lt;/p&gt;&lt;p&gt;&lt;span style="font-size:xx-small;"&gt;ajde&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;da&lt;/em&gt;&lt;/p&gt;';
var decoded = $('<div/>').html(text).text();
alert(decoded);

So in your case:

var decoded = $('<div/>').html(data.description).text();
$('#gbFullPic').html(decoded);

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Apr 29, 2013 at 23:38

LouD

3,8444 gold badges21 silver badges17 bronze badges

2 Comments

TARKUS Over a year ago

Thanks Loud. With a little fiddling around, I applied your principles to my problem and now it works. I'll edit my question to display the new code.

John Foll Over a year ago

Thanks. This helped me. It was exactly what you stated for me, but it was a problem with needing to change double quotes to single quotes.

Collectives™ on Stack Overflow

jquery parseHTML not working as expected

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related