Question : use php to create a xml tree and iterate over that tree in jquery

I'm trying to call a php script that returns an xml structure that I want to iterate over and construct a list of items on the javascript/jquery client. I have an alert in the below jquery .each function so I know its returning something but its not returning the xml element's value. It returns the 3rd code snippet below, any ideas?

xml structure is
<images>
<image>
<fileName>filename.jpg</fileName>
<caption>file caption</caption>
</image>
<image>....etc
</images>

php code to construct xml:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header("Cache-Control: no-cache, must-revalidate" ); 
header("Pragma: no-cache" );
header("Content-Type: application/xml; charset=utf-8");
$xml = '<?xml version="1.0" ?><images>';
$directory = "testimages/";
if(file_exists($directory) && is_dir($directory)){
    $handle = opendir($directory);
    while(($file = readdir($handle))!== false){
            if(!is_dir($file)){
                  $ext = substr($file, -3);
                  if($ext == "jpg" || $ext == "gif" || $ext == "png"){
                        $xml .= "<image>";
                    $xml .= "<fileName>".$file."</fileName>";
                        $xml .= "<caption>image caption</caption>";
                        $xml .= "</image>";
                  }
            }
    }
}
$xml .= '</images>';
echo $xml;

html/jquery code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
<html>
<head>
<script language="javascript" type="text/javascript">
$(function() {
                        var data1="";
                        $.get("images.php", function(theXML){
                         $('image',theXML).each(function(i){                               
                               var filename = $(this).find("fileName").text;
                               alert(filename);
                               data1 = data1 + filename;
                          }
                        );
                        $("#testxml").html(data1);                  
                        });
</script>
</head>
<body>
<div id="testxml">
</div>
</body>
<html>

this is what gets alerted from the filename variable and it matches the number of <image> xml elements exactly.

function( text ) { if ( typeof text !== "object" && text != null ) return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) ); var ret = ""; jQuery.each( text || this, function(){ jQuery.each( this.childNodes, function(){ if ( this.nodeType != 8 ) ret += this.nodeType != 1 ? this.nodeValue : jQuery.fn.text( [ this ] ); }); }); return ret; }function( text ) { if ( typeof text !== "object" && text != null ) return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );

Answer : use php to create a xml tree and iterate over that tree in jquery

It looks like you might be returning the actual text method and not calling it. Try changing the line to this:

                       
             var filename = $(this).find("fileName").text();

Question : use php to create a xml tree and iterate over that tree in jquery

Answer : use php to create a xml tree and iterate over that tree in jquery

It looks like you might be returning the actual text method and not calling it. Try changing the line to this: 1: var filename = $(this).find("fileName").text();

It looks like you might be returning the actual text method and not calling it. Try changing the line to this:

1:

var filename = $(this).find("fileName").text();