Load all xml files in a directory without knowing names with javascript

Question

Stack

I am trying to dynamically display a product page in html that will be easy to edit. My set up is a bunch of xml files, one for each product, that will go into the same directory as the html page they go with. Then when the page loads, it also reads in all of the xml files in the directory with it, which could be changing pretty regularly.

I would like to do this in javascript, but I don't know how to develop a list of files in my current directory. The only information I can find talks about finding files on the clients computer which I do not need. I need to list all the files on the server in the current directory. I already have the code working for loading files once I know the name, I just need a list of filenames to put in the function.

As always thanks a lot for the help.

RShom

Javascript isnt going to have access to your server's file system; your options are to provide a handler for the javascript to request that and then parse it (shudder), or your server must have some processing capacity to read those files and dynamically render a response. — Tejs
– Tejs, Commented May 31, 2011 at 22:03
It sounds like your saying I should ditch the JavaScript and just use a different language? Also,thanks didn't know how that worked. Now I do. — Rusty
– Rusty, Commented May 31, 2011 at 22:08
I don't think you do, javascript is run on the client. There are very few other languages that run on the client. — Nicklas A.
– Nicklas A., Commented May 31, 2011 at 22:14

Alex Gray · Accepted Answer · 2011-06-18 05:58:55Z

OK, doing this opens pandora's box, but also a lot of cool capabilities as well, too numerous to count.. Even without PHP, it's still totally doable...

One way:

Turn on XHTML file listings in Apache. Go to your /etc/apache2/httpd.conf, make sure you've uncommented

LoadModule autoindex_module libexec/apache2/mod_autoindex.so

as well as turned off any IndexOptions you may have and replace them with these...

IndexOptions XHTML SuppressHTMLPreamble Type=text/xml

Restart apache, browse to your configured VirtualHost.. and you should have a nicely styled file listing, with source that resembles this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index of /dir/CRUD</title>
</head>
<body>
<h1>Index of /dir/CRUD</h1>
<ul><li><a href="/dir/"> Parent Directory</a></li>
<li><a href="CRUD.aspx"> CRUD.aspx</a></li>

<li><a href="CRUD.aspx.cs"> CRUD.aspx.cs</a></li>
<li><a href="member.xml"> member.xml</a></li>
<li><a href="web.config"> web.config</a></li>
</ul>
<address>Apache/2.2.17 (Unix) PHP/5.3.4 Server at yourserver,net Port 80</address>
</body></html>

As you can see, this is a fairly simple, valid XML file with whatever directory you're trying to list. Now, with a list of files in XML at your disposal, you can get as creative as you want in terms of styling, parsing, and doing with it as you please... You could easily setup an automated gallery that will show every file in the folder, or you could generate a javascript array with the info and perform a myriad other RSS, JSON, or whathaveyou functions with it.

Another way, does't require any changes to your apache IndexOptions, but they DO need to be enabled...

Create two HTML files on your server...

test.htm

<html>
<head>
<script>
function reload_main() {
  window.main.location.href = "main.htm";
}
</script>
</head>
<frameset rows="*,1" onLoad="reload_main()">
<frame src="blank.htm" name="main">
<frame src="css/" name="directory">
</frameset>
</html>

main.htm

<html>
<body>
<h1>Contents of directory</h1>
<script>
var links_length = parent.directory.window.document.links.length;
var link = "";
for (var i = 0; i < links_length ; i++) {
  link = parent.directory.window.document.links[i].href;
  document.write(
    '<a href="'+link+'">'+link+'</a><br>'
  );
}
</script>
<p><a href="index.htm" target="_parent">Return</a>
</body>
</html>

This will get you the same thing, basically, but embedded in an invisible iFrame. Still, you can extract the subsequent <li><a href="baboon.png"> baboon.png</a></li> items and manipulate your XML to do whatever you want.

Nicklas A. · Accepted Answer · 2011-05-31 22:33:28Z

1

Easiest way is to have a script on the server which send the file names as a JSON encoded string.

This php script outputs all xml files with the .xml extensions that is in the same directory as the script (just change opendir to use some other path)

<?php
$files = array();

if($handle = opendir(dirname(__FILE__))) {
    while (false !== ($file = readdir($handle))) {
        if(substr($file, -4) == ".xml")
            $files[] = $file;
    }

    closedir($handle);
}

echo json_encode($files);
?>

You would then in javascript just get the json with ajax, here using jQuery:

$.getJSON("http://example.com/path/to/script.php" function(files) {
    // Do something with the files
});

The only other way would be to rely on the server producing an index (such as apaches autoindex) but that would be a lot more work.

edited May 31, 2011 at 22:33

answered May 31, 2011 at 22:01

Nicklas A.

7,0717 gold badges44 silver badges67 bronze badges

2 Comments

Rusty Over a year ago

So, I have been trying to test this, and it turns out that the webhost I am using doesn't support php. (faq.1and1.co.uk/scripting/webconfig/2008/3.html) Is there any other way around this?

Nicklas A. Over a year ago

Someone who's coded ASPX before can probably easily convert this script to work on your web server, unfortunately I haven't coded ASPX before so I have no idea.

Collectives™ on Stack Overflow

Load all xml files in a directory without knowing names with javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related