Hi all,

How do you read specific <div> tag from responsetext?
And also, is it possible to count how many <div> tag are there in responsetext?

I have been googling for quite sometime but didn't find any tutorial or explanation nor answer.

Thanks for the help.

Okay, here's the situation ...

I thought this would be a handy thing to know and am planning on rebuilding my javascript ajax class soon anyway.

What you need to do is two-fold

1. On the server-side script that returns the results you need to set the 'Content-type" to "application/xml" -- this varies by server-side language, but in PHP it looks like this

<?php
header( 'Content-type: application/xml; charset="utf-8"');
print <<<ENDHTML
<html>
  <div>
    <div>Some block content goes here</div>
  </div>
  <div>Some more content goes here</div>
</html>
ENDHTML;
?>

Remember that xml requires a single enclosing container, so I used <html>, but it could be anything -- so long as you do NOT do this ...

<?php
header( 'Content-type: application/xml; charset="utf-8"');
print <<<ENDHTML
<div>
  <div>Some block content goes here</div>
</div>
<div>Some more content goes here</div>
ENDHTML;
?>

... which creates two root-level enclosing containers (the two <div> tags)

2. You need to grab your Ajax results as responseXML and not responseText, so ...

respXML = httpAgent.responseXML;
var divs = respXML.getElementsByTagName('div');
alert( divs.length );

... inside your Ajax function/method.

From here you can do any JavaScript DOM methods on the responseXML.

Hope this helps

I so lied !

I can't seem to get elements of the XML using javascript DOM methods in other ways than using getElementsByTagName('tag');

but I'm still working on it, will post back here with any updates.

Ciao

Right-O,

It's not as handy as being able to use getElementById() but this sort of thing is working and can be used to get the same results.

var divs = respXML.getElementsByTagName('div');
for ( i = 0; i < divs.length; i ++ ) {
  if ( divs.item(i).getAttribute('id') == 'last_div' ) {
    alert( divs.item(i).firstChild.nodeValue );
  } else {
    alert( divs.item(i).nodeName + ' :: ' + divs.item(i).getAttribute('id') );
  }
}

Here's my altered PHP code

<?php
header( 'Content-type: application/xml; charset="utf-8"' );
print <<<ENDHTML
<html>
  <div id="first_div">
    <div id="nested_div">Some block content goes here</div>
  </div>
  <div id="last_div">Some more content goes here</div>
</html>
ENDHTML;
?>

*Note: All of my dev was done in FF 3 and then verified in IE 7

Hope this helps

Hi,

Just for future reference. The solution for this is by using createElement("div")

First declare a variable by using createElement

var tempEle = document.createElement("div");

Then, store the responsetext into the innerHTML of that element variable

tempEle.innerHTML = html;

From there, you can use any getElement command and retrieve information from that variable.

var someID = tempEle.getElementById("hello");
alert(someID.innerHTML);

No server-side code is needed for this.

Hi,

Just for future reference. The solution for this is by using createElement("div")

First declare a variable by using createElement

var tempEle = document.createElement("div");

Then, store the responsetext into the innerHTML of that element variable

tempEle.innerHTML = html;

From there, you can use any getElement command and retrieve information from that variable.

var someID = tempEle.getElementById("hello");
alert(someID.innerHTML);

No server-side code is needed for this.

Wanted to thank you for that piece of information. It's good to know and will certainly come in handy ...

Thanks

This question has already been answered. Start a new discussion instead.