Ask your JavaScript questions! Pay money and get answers fast! (more info)

How to get HTML via Ajax yet load it as a DOM element, not string JavaScript


I did a big Javascript project in 2006. I used the Prototype library. The project allowed people to build their own web pages, adding elements to the page and moving them around. I have not done much with Javascript since, so I've missed some of the changes that happened over the last 5 years. Back then, a big problem I faced regarding loading new template elements. The Javascript would fire an Ajax call that would ping a PHP script on the server. The PHP script would then send back the requested template. The PHP send HTML, and the Javascript loaded this as a string, usually into innerHTML.

I need a way to get a text from the server, but load the text as nested DOM elements. How do I do this?

If I was willing to give up cross-browser compatibility, then could I do this in FireFox?

As much as I love jQuery, I'm going to stick with Prototype on this project, because I only have the weekend and I can not afford to re-write this project from scratch.

Answers (3)


Rainner Lins answers:

When you say "nested DOM elements", do mean get the data from PHP in a way that you can parse individual parts on the JS end instead of a big block of string data? PHP is able to parse an array into a JSON string that you can send over to JS to get parsed. That would give you an Object you can use. For example ..

$a = array();
$a['name'] = 'some name';
$a['path'] = '/some/path';

echo json_encode( $a );

after you fetch that from JS and parse it, you would end up with..

var obj = PHP_JSON_STRING_DATA.evalJSON(); // some name
obj.path // /some/path

and so on..

[[LINK href=""]]Prototype evalJSON[[/LINK]]

I haven't used prototype that much but im sure the function above will do for parsing JSON data.
Some browsers are able to do it the native way by using var obj = JSON.parse( PHPDATA );

Lawrence Krubner comments:

Rainner Lins, thank you much. That is a hot tip. I do not think anything like evalJSON existed when I first wrote this code in 2006.


Christianto answers:


what about creating div element and append the returning html to the div then we access it..?
I'm not familiar with prototype but this could be the code...

new Ajax.Request('/someurl', {
requestHeaders: {Accept: 'application/json'},
onSuccess: function(transport){

var my_div = document.createElement('div');

my_div = $(my_div);
/* or you can extend the element */
// Element.extend(my_div);


// access the nodes and do something...
var child = my_div.childNodes;



Julian Drei├čig answers:


I am not sure if I understand your question correctly: do you want to load HTML content via Ajax and display it on the page, or do you want to access the resulting DOM structure programmatically?

In the first case you most likely want to use Prototype's Ajax.Updater. The most basic call would be:

new Ajax.Updater('targetElementId', '/your/url');

For the second case, Christianto already pointed out a solution: create an empty wrapper element (e.g. a div) and insert the received HTML text:

new Ajax.Request('/your/url', {
onSuccess: function(response) {

// create the wrapper element and insert the received HTML text
var wrapper = new Element('div');

// access the resulting DOM structure, e.g. for an element with ID 'myElementId'
var nestedElement = wrapper.down('myElementId');
// or e.g. all LI elements contained in the received HTML
var nestedLIs ='li');


Note that any scripts contained in the received HTML text will be evaluated on the wrapper.update call.

Prototype ensures cross browser compatibility, this code should work in all browsers supported by Prototype.

You will find examples and further options in Prototype's documentation: [[LINK href=""]]Ajax.Request[[/LINK]], [[LINK href=""]]Ajax.Updater[[/LINK]], and [[LINK href=""]]Element[[/LINK]].

Please note that the above code requires Prototype v1.6 or greater. Also keep in mind that if you want to access rendering properties such as element dimensions you will need to attach the wrapper element to the document tree, e.g.

// inside the onSuccess handler:
$(document.body).insert({bottom: wrapper});

In this case you also may want to hide the wrapper before inserting.

Lawrence Krubner comments:

Thank you for this bit:

<blockquote>Note that any scripts contained in the received HTML text will be evaluated on the wrapper.update call.</blockquote>

I appreciate the clarification. I did not know that.