display html code of response returned by ajax, Jquery

Question

I have a jquery AJAX function which retrieves some HTML markup and displays it on the page. I would also like to display the html code of this HTML returned. I've looked around for a solution but not finding any. Can someone please help. Many thanks

$.post('get_news.php', $("#gifForm").serialize(), function(data) {
     //Show HTML
     $('#output').html(data);

     //Show HTML code
     $('#output_code').html(data);
});

By html code do you mean you literally want the webpage to display `
` or would you rather it render the div? — Tomas Reimers, Jan 17 '12 at 20:01
Look at this [question](http://stackoverflow.com/q/24816/617996). — PrimosK, Jan 17 '12 at 20:03

score 12 · Accepted Answer · answered Jan 17 '12 at 20:04

12

try using the text() function. This will escape and display html code. http://api.jquery.com/text/

$.post('get_news.php', $("#gifForm").serialize(), function(data) {
  //Show HTML
  $('#output').html(data);
  //Show HTML code
  $('#output_code').text(data);
});

answered Jan 17 '12 at 20:04

Hoppy

136
8

Maybe this is obvious, but for displaying HTML code you will often want the `#output_code` node to be a `pre` tag so that the spaces and line-breaks will be displayed. – Brent Bradburn Feb 03 '13 at 21:50

score 1 · Answer 2 · edited May 24 '14 at 07:04

1

You can surround your html with "code" and it should display it as is without rendering the html:

$('#output_code').html("<code>" + data + "</code>");

edited May 24 '14 at 07:04

trante

33,518
47
192
272

answered Jan 17 '12 at 20:05

Troy Barlow

313
2
9

score 0 · Answer 3 · answered Jan 17 '12 at 20:00

0

Put the output in a textarea. It will maintain the formatting. (if the HTML contains a textarea, you'll have to escape it first).

answered Jan 17 '12 at 20:00

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 4 · answered Jan 17 '12 at 20:01

0

You can try to use escape on the HTML data. Try this

$.post('get_news.php', $("#gifForm").serialize(), function(data) {
    //Show HTML
    $('#output').html(data);
    //Show HTML code
    $('#output_code').html(escape(data));
});

answered Jan 17 '12 at 20:01

ShankarSangoli

69,612
13
93
124

score 0 · Answer 5 · answered Jan 17 '12 at 20:01

The code returned and displayed by the AJAX is anything created and output by the PHP script you are calling. All of the code should be present so you may need to adjust the output of the PHP to include the elements you want.

What does the PHP page do? database work? query and display results? what you should see in the AJAX results is the same thing you would get if you tried the php script on its own.

adeneo · Answer 6 · 2012-01-17T20:24:39.783

From your code it looks like this is sent back from a PHP file, if so you could just use one of PHP's htmlentities functions to convert the result before sending it back to the Ajax function, and it will display just fine, preferrably in a html pre tag.

You should also use jQuery text() and not html().

If you would like syntax highlighting, line numbers and lots of other stuff, GeSHi and Syntax Highlighter is used by a lot of sites to display code snippets.

display html code of response returned by ajax, Jquery

6 Answers6

Linked