jquery, ajax and getting a complete html structure back

Question!

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 javascipt 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.

thank you for any help.

tim



Answers

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.

By : mrr0ng


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.

By : Apreche


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");


This video can help you solving your question :)
By: admin