CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Tim Ashman
Tim Ashman

Reputation: 65

jQuery, Ajax and getting a complete html structure back

I'm new to jQuery and to some extent JavaScript programming. I've successfully started to use jQuery for my Ajax calls however I'm stumped and I'm sure this is a newbie question but here goes.

I'm trying to return in an Ajax call a complete html structure, to the point a table structure. However what keeps happening is that jQuery either strips the html tags away and only inserts the deepest level of "text" or the special characters like <,>, etc get replaced with the escaped ones

I need to know how to turn off this processing of the received characters. Using firebug I see the responses going out of my WebServer correctly but the page received by the user and thus processed by jQuery are incorrect. A quick example will so what I mean.

I'm sending something like this

<results><table id="test"><tr>test</tr></table></results>

what shows up on my page if I do a page source view is this.

&lt;results&gt;&lt;table....

so you can see the special characters are getting converted and I don't know how to stop it.

The idea is for the <results></results> to be the xml tag and the text of that tag to be what gets placed into an existing <div> on my page.

Here is the JavaScript that I'm using to pull down the response and inserts:

$.post(url, params, function(data) 
{ 
  $('#queryresultsblock').text(data)
}, "html");

I've tried various options other than "html" like, "xml", "text" etc. They all do various things, the "html" gets me the closest so far.

Upvotes: 2

Views: 3105

Answers (3)

Vincent Robert
Vincent Robert

Reputation: 36120

The simplest way is just to return your raw HTML and use the html method of jQuery.

Your result: 

<table id="test"><tr>test</tr></table>

Your Javascript call:

$.post(url, params, function(data){ $('#queryresultsblock').html(data) })

Another solution with less control — you can only do a GET request — but simpler is to use load:

$("#queryresultsblock").load(url);

If you must return your result in a results XML tag, you can try adding a jQuery selector to your load call:

$("#queryresultsblock").load(url + " #test");

Upvotes: 2

mrr0ng
mrr0ng

Reputation: 37

The other thing you could do is create an external .html file with just your HTML code snippet in it. So create include.html with 

<results><table id="test"><tr>test</tr></table></results>

As the contents, then use a jquery .load function to get it onto the page. See it in action here.

Upvotes: 0

Apreche
Apreche

Reputation: 32889

You can't put unescaped HTML inside of XML. There are two options I see as good ways to go.

One way is to send escaped HTML in the XML, then have some JavaScript on the client side unescape that HTML. So you would send

<results>&lt;results&gt;&lt;table....

And the javascript would convert the &lt; to < and such.

The other option, and what I would do, is to use JSON instead of XML.

{'results': "<table id="test"><tr>test</tr></table>" }

The JavaScript should be able to extract that HTML structure as a string and insert it directly into your page without any sort of escaping or unescaping.

Upvotes: 1

Related Questions