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.

score 5 · Accepted Answer · edited May 23 '17 at 12:06

5

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 '17 at 12:06

Community

1
1

answered Apr 29 '13 at 23:38

LouD

3,776
4
19
17

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. – TARKUS Apr 30 '13 at 00:13

Mathijs Flietstra · Answer 2 · 2013-09-18T11:55:38.530

4

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 '13 at 11:55

answered Apr 29 '13 at 23:35

Mathijs Flietstra

12,900
3
38
67

Thanks for the help, but using that gives me: Error: TypeError: $.parseHTML(...).html is not a function – TARKUS Apr 29 '13 at 23:51
the same "TypeError: jQuery.parseHtml is not a function" when try to use $.parseHtml() what can it be? – user1954544 Sep 18 '13 at 11:36
1

@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. – Mathijs Flietstra Sep 18 '13 at 11:57

jquery parseHTML not working as expected

2 Answers2