HTML within JSON

HTML within JSON

I know its not the done thing and should be avoided so hopefully someone can give me some tips here.

I am running server side checks which return JSON. The server returns a code to determine what type of MessageBox to show (0: YESNO, 1:OK etc.,).

Dependent on the server query, I want to prompt the user within msg.show to display data which can be formatted in different ways, it could be a simple line of text or it could be more complex, I don't know up front.

The way I had done this in the past was simply to use an AJAX call and render the response which was formatted with HTML (allowing me to construct complex tables and master/detail tables) and render the HTML within a div with overflow:auto.

I want to use JSON which provides a good construct for other aspects like success/fail, my problem is that the data is returned but the overflow is not working, the messagebox increases in height beyond the screen and screws up the whole screen layout.

I know I am not using this correctly and wondered if there was either:

a) a preferred method for structuring data returned to display b) a way of encoding the HTML to allow it to be passed within the JSON

I am really looking for any pointers to the most suitable method of approaching this.

Sample JSON (could be hundreds of rows):

({
    'success': 'true',
    'msgType': '1',
    'msg': '<b>The following will be deleted if you continue: </B><table class="x-grid3-body"><tr class="x-grid3-header"><th class="x-grid3-hd-inner" style="width:60px;">Site</Th><th class="x-grid3-hd-inner">Site Name</th></tr><tr><td colspan="2"><div style="overflow:auto; height: 300;"><table><tr class="x-grid3-locked"><td class="x-grid3-hd-inner" style="width:30px;"><b>1936</b></td><td class="x-grid3-hd-inner"><b>Entity Name</b></td></tr><tr><td></td><td><table><tr class="x-grid3-header"><td class="x-grid3-hd-inner">ID</td><td class="x-grid3-hd-inner">First Name</td><td class="x-grid3-hd-inner">Last Name</td><td class="x-grid3-hd-inner">DOB</td></tr><tr class="x-grid3-locked"><td class="x-grid3-hd-inner">15145</td><td class="x-grid3-hd-inner">John</td><td class="x-grid3-hd-inner">Smith</td><td class="x-grid3-hd-inner">01\u002F06\u002F1931</td><td class="x-grid3-hd-inner" align="right"></td></tr></table></td></tr></table>&开发者_JS百科lt;/div></td></tr></table>'
})

It is wrong conceptually (but not technically) to return markup in JSON responses. By having markup defined in two different places - client code and server code - is just asking for maintenance problems in future.

Instead I would suggest to use one of template engines available and so your message box will be defined by template

<script id="confirm-msg" type="text/template">
  <b>The following will be deleted if you continue:</b>
  <table>
  {{records}}
    ...
  {{/records}}
  </table>
</script>

And your JSON will look like:

{   "success": true,
    "msgType": 1,
    "msgTemplate": "confirm-msg",
    "records": [....] 
}

In this case person who will style all this will have clear vision of what styles to apply and where.

Passing a string of HTML in a JSON object should work fine, provided that you're careful about quotation marks and special characters. Your overflow problem sounds like it's more a CSS or layout issue than a data transfer question, and without seeing that code it's tough to help.

Generally speaking, it's usually a good idea to keep all layout-specific markup IN your html file (or php template, or whatever), and pass as little data as possible through your net requests. That said, another approach would be to keep the HTML for your table in your DOM (hidden) before you make the request, complete with css and styles and all that, and simply populate it with data coming from your ajax request. You could extend the schema of your msg object to include whatever fields you need to populate like msg_header, and then have subsequent row objects that you iterate through and create trs and tds accordingly.

Also, make sure to use .html() instead of .text(), for example: $("#container").html(jsonObject.msg)

If you run into encoding issues, you can look into escape and unescape, but it's difficult to recommend specifics without seeing a specific encoding problem first.

Good luck.