title: HTML within JSON
body: <p>HTML within JSON </p>
  
  <p>I know its not the done thing and should be avoided so hopefully someone can give me some tips here.</p>
  
  <p>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.,).</p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>I know I am not using this correctly and wondered if there was either:</p>
  
  <p>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</p>
  
  <p>I am really looking for any pointers to the most suitable method of approaching this.</p>
  
  <p>Sample JSON (could be hundreds of rows):</p>
  
  <pre><code>({
      'success': 'true',
      'msgType': '1',
      'msg': '&lt;b&gt;The following will be deleted if you continue: &lt;/B&gt;&lt;table class="x-grid3-body"&gt;&lt;tr class="x-grid3-header"&gt;&lt;th class="x-grid3-hd-inner" style="width:60px;"&gt;Site&lt;/Th&gt;&lt;th class="x-grid3-hd-inner"&gt;Site Name&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td colspan="2"&gt;&lt;div style="overflow:auto; height: 300;"&gt;&lt;table&gt;&lt;tr class="x-grid3-locked"&gt;&lt;td class="x-grid3-hd-inner" style="width:30px;"&gt;&lt;b&gt;1936&lt;/b&gt;&lt;/td&gt;&lt;td class="x-grid3-hd-inner"&gt;&lt;b&gt;Entity Name&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;table&gt;&lt;tr class="x-grid3-header"&gt;&lt;td class="x-grid3-hd-inner"&gt;ID&lt;/td&gt;&lt;td class="x-grid3-hd-inner"&gt;First Name&lt;/td&gt;&lt;td class="x-grid3-hd-inner"&gt;Last Name&lt;/td&gt;&lt;td class="x-grid3-hd-inner"&gt;DOB&lt;/td&gt;&lt;/tr&gt;&lt;tr class="x-grid3-locked"&gt;&lt;td class="x-grid3-hd-inner"&gt;15145&lt;/td&gt;&lt;td class="x-grid3-hd-inner"&gt;John&lt;/td&gt;&lt;td class="x-grid3-hd-inner"&gt;Smith&lt;/td&gt;&lt;td class="x-grid3-hd-inner"&gt;01\u002F06\u002F1931&lt;/td&gt;&lt;td class="x-grid3-hd-inner" align="right"&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;'
  })
  </code></pre>