[SOLVED] Javascript - Retrieve names of files in a folder

Javascript - Retrieve names of files in a folder

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.

Solution

<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.