[SOLVED] My first AJAX page

[powerpants]

Hi,

 

I'm trying to make a part of a site I'm building scan a directory and display some information about it when the user selects it from a select box.  I have a php function to make an xml file and javascript script to insert the data in different parts of the page.  I think that what I have should work, but it doesn't!  Could someone look at what I've done and point out my silly newbie mistake? Thanks!

 

Here's my JavaScript:

var xmlHttp;

function showFolderInfo(str)
{
xmlHttp = GetXmlHttpObject();
if(xmlHttp == null)
{
	alert("Your browser sucks and does not suport AJAX");
	return;
}
document.getElementById("folderName").innerHTML = str;

var url = "getFileInfo.php";
url = url + "?q=" + str;
url = url + "&sid=" + Math.random();
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);

}

function stateChanged()
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
{
	xmlDoc = xmlHttp.responseXML;
	document.getElementById("lastModified").innerHTML = "Hebbo!"; //xmlDoc.getElementsByTagName("lastmodified")[0].childNodes[0].nodeValue;
	document.getElementById("folderContents").innerHTML = xmlDoc.getElementsByTagName("filecontents")[0].childNodes[0].nodeValue;
}
}

function GetXmlHttpObject()
{
var xmlHttp = null;
try
{
	//Firefox, Opera 8.0+, Safari
	xmlHttp = new XMLHttpRequest();
}
catch(e)
{
	//Internet Explorer
	try
	{
		xmlHttp = new ActiveXObject("Msxml2.HMLHTTP");
	}
	catch(e)
	{
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
}
return xmlHttp;
}

 

And here's my getFileInfo.php script:

<?php

$folderName = $_GET["q"];


$picturesDirectory = "./pictures";

$files = array();

if ($handle = opendir($picturesDirectory . "/" . $folderName))
{

    for($i = 0; false !== ($file = readdir($handle)); $i++)
{
        if ($file !== "." && $file !== "..")
	{
		$files[$i] = $file;
	}

    }

echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
echo "<filedata>";

echo "<filecontents>";
foreach($files as $file)
{
	echo $file;
}
echo "</filecontents>";

echo "</filedata>";

    closedir($handle);
}

?>

 

EDIT:  For some reason, the code block refuses to show the opening ' mark on the

 

'<?xml version="1.0" encoding="ISO-8859-1"?>';

 

line.  But it's in my code.

 

[printf]

You have to add the header() Content-Type XML... and your JavaScript has to return the the xml element, not the xml object!

 

So in your PHP script...

 

change...

 

echo '<?xml version="1.0" encoding="ISO-8859-1"?>';

 

 

to this...

 

header ( 'Content-Type: application/xml' );
echo '<?xml version="1.0" encoding="ISO-8859-1"?>';

 

In your JavaScript code...

 

change...

 

      xmlDoc = xmlHttp.responseXML;

 

 

to this...

 

      xmlDoc = xmlHttp.responseXML.documentElement;

 

Last thing...

 

Make sure you validate the incoming data....

[powerpants]

Cool, thanks!  I am working based on the w3schools PHP/AJAX tutorial, which does not show that you need the header and the xml element!

 

One more question - Since there are multiple files in my directory that I want to show, what's the best way to put line breaks between them when I have my javascript insert them into the "filecontents" span since I cannot have <br /> tags in the xml file itself?

 

Thanks again for your help!

[printf]

Have a look at this example...

 

Example

 

You can just copy the HTML file and to get the PHP file just click here

[landavia]

oot ..

catch(e)
   {
      //Internet Explorer
      try
      {
         xmlHttp = new ActiveXObject("Msxml2.HMLHTTP");
      }
      catch(e)
      {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }

are this js work?

>>xmlHttp = new ActiveXObject("Msxml2.HMLHTTP");

????

[powerpants]

Thanks for catching that for me! I don;t have IE so I haven't tested my page in IE yet.

 

Also, www.phpbyexample.com is not responding.  Would it be possible for you to post your example here?

 

Thanks!

[landavia]

<?php

$folders = array ( 'images' );

if ( ! empty ( $_GET['s'] ) && in_array ( $_GET['s'], $folders ) )
{
$folder = glob ( './' . $_GET['s'] . '/*' );

header ( 'Content-Type: application/xml' );
echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
echo '	<filedata>';
echo '		<filecontents>';
echo implode ( "\r\n", $folder );
echo '		</filecontents>';
echo '	</filedata>';
}
else
{
echo 1;
}

?>

your wish is my command

sry.. copy-paste

[powerpants]

Great, thanks!