I have created a table containing a lot of HTML, in PHP. Once created, I echo it out as a JSON string like this:

echo json_encode($array['table']); 

I then use jQuery.parseJSON(returnString); and try to append it to a div. This only works if I return a string. It does not work when I send HTML (nothing gets returned at all in this case).

Can anyone tell me what is going wrong? Do I need to use some function to parse \ / " ' symbols before sending it to jQuery?

EDIT:

My $arr['table'] looks something like this:

$arr['table'] = "<tr class=\"{$id}\">lalalal</tr>"

My JSON looks like this:

\n\t\t\t\t\t</div>\n\t\t\t\t\tfcds\n\t\t\t\t\t</center>\

I have created a table containing a lot of HTML, in PHP. Once created, I echo it out as a JSON string like this:

echo json_encode($array['table']); 

I then use jQuery.parseJSON(returnString); and try to append it to a div. This only works if I return a string. It does not work when I send HTML (nothing gets returned at all in this case).

Can anyone tell me what is going wrong? Do I need to use some function to parse \ / " ' symbols before sending it to jQuery?

EDIT:

My $arr['table'] looks something like this:

$arr['table'] = "<tr class=\"{$id}\">lalalal</tr>"

My JSON looks like this:

\n\t\t\t\t\t</div>\n\t\t\t\t\tfcds\n\t\t\t\t\t</center>\

• php
• javascript
• jquery
• json

Share Follow edited Dec 31, 2011 at 4:00 Erwin Brandstetter 661k158158 gold badges1.1k1.1k silver badges1.3k1.3k bronze badges asked Dec 31, 2011 at 2:05 good_eveninggood_evening 21.8k6969 gold badges198198 silver badges306306 bronze badges 1

• What does your JSON look like? – Ayman Safadi Commented Dec 31, 2011 at 2:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You shouldn't be sending HTML data via JSON, but rather just "data" and then using javascript to create new HTML elements and modify the dom with those new elements.

A jQuery example:

var json_doc = $.getJSON('http://yourservice./yo/');
var tr = $(document.createElement('tr'));
tr.attr('id', json_doc.responseText.id);
tr.html(json_doc.responseText.html);
$('table').append(tr);

Your response from your http://yourservice./yo/ would be:

{id: 1, html: "lalalal"}

Explanation

As @tkone pointed out: you shouldn't be sending HTML data via JSON, that is not its purpose.
It can be done, but shouldn't be done

Either you output all the HTML, and do all the processing on the server page, and return it as HTML
Like this

PHP (server_page.php)

//Connect
$link = mysql_connect($server, $user, $password);
//Select
mysql_select_db($db, $link);
//Query
$result = mysql_query($query);

$data = $_GET['some_data'];

//Loop
echo "<table id='$data'>";
while($row = mysql_fetch_array($result)){
    echo "<tr>";
    foreach($row as $key => $value){
        echo "<td>$value</td>";
    }
    echo "</tr>";
}
echo "</table>";

//Cleanup
mysql_free_result($result);
mysql_close($link);

Javascript

var data = {"some_data": "Foobar"};
$.get("server_page.php", data, function(response){
    $("#output").html(response);
});

Or, you output it as JSON information, with data that can then be processed in Javascript
Like this

PHP (server_page.php)

//Connect
$link = mysql_connect($server, $user, $password);
//Select
mysql_select_db($db, $link);
//Query
$result = mysql_query($query);
$num_result = mysql_num_rows($result);    

$data = array(
    "mysql_data" => array(),
    "num_result" = $num_result
);

//Loop
while($row = mysql_fetch_array($result)){
        $data['mysql_data'][] = $row;
}

echo json_encode($data);
//Cleanup
mysql_free_result($result);
mysql_close($link);

Javascript

$.getJSON("server_page.php", function(data){
    alert("Number of rows returned from query: "+data.num_result);
});

But you shouldn't mix the two different methods. You've got to decide where you handle all the logic and pass all the data you need there.

---

Solution

As you yourself pointed out,

"<tr class=\"{$id}\">lalalal</tr>" 

is incorrect JSON.

It should be

"<tr class='{$id}'>lalalal</tr>"

All JSON has to share the same quotation symbols, ie, if you use " '' " or ' "" '.

I suggest you do all your logic on the server side. You can always send along some data from your Javascript with your request via POST or GET. It goes both ways you know.

I think you just need to escape special chars before sending it to jq. I usually use this lib http://phpjs/functions/htmlspecialchars:426 to encode special chars...

I found a mistake if I can call it like that. After I'd changed \"{$id}\" to '{$id}' it worked.