Menu
I have a requirement where I need to retrieve all the filenames from a folder in client side.
Hence I am trying to retrieve the names of the files in a folder using Jquery referring to this answer.
My code is as follows:
<script>
var fileExt = ".xml";
$(document).ready(
function(){
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: 'xml/',
success: function (data) {
$("#fileNames").html('<ul>');
//List all xml file names in the page
$(data).find('a:contains(" + fileExt + ")').each(function () {
var filename = this.href.replace(window.location, "").replace("http:///", "");
$("#fileNames").append( '<li>'+filename+'</li>');
});
$("#fileNames").append('</ul>');
}
});
});
</script>
HTML code is as follows:
<div id="fileNames"></div>
But I get the following error when I run the code in chrome and firefox:
chrome: XMLHttpRequest cannot load file:///E:/Test/xml/. Received an invalid response. Origin 'null' is therefore not allowed access.
Firefox: ReferenceError: $ is not defined
I have tried googling a lot but the error is not resolved.
Your help would highly be appreciated.
995
<html>
<body>
<div id='fileNames'></div>
</body>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$.get(".", function(data)
{
$("#fileNames").append(data);
});
})
</script>
this will print all the files in a folder on webpage.
155
It looks like you are running it by double clicking on html file. So it will run in browser with file protocol.
You have to run it from server like http://localhost/myhtml.html.
I have tried code in my system, it's working with server.
you have syntax error in below line
$(data).find('a:contains(" + fileExt + ")').each(function () {
replace above with this
$(data).find("a:contains(" + fileExt + ")").each(function () {
I'm on ubuntu system, and with chrome browser, you do not need to replace location. because it is returning relative path to location.
Your final code should look like this
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var fileExt = ".xml";
$(document).ready(function(){
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: 'xml/',
success: function (data) {
console.log(data);
$("#fileNames").html('<ul>');
//List all xml file names in the page
//var filename = this.href.replace(window.location, "").replace("http:///", "");
//$("#fileNames").append( '<li>'+filename+'</li>');
$(data).find("a:contains(" + fileExt + ")").each(function () {
$("#fileNames").append( '<li>'+$(this).text()+'</li>');
});
$("#fileNames").append('</ul>');
}
});
});
});
//]]>
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
