title: Javascript - Retrieve names of files in a folder
body: <p>I have a requirement where I need to retrieve all the filenames from a folder in client side.</p>
  
  <p>Hence I am trying to retrieve the names of the files in a folder using Jquery referring to <a href="https://stackoverflow.com/a/18480589/3824135">this answer</a>.</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>    &lt;script&gt;
          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('&lt;ul&gt;');
                 //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( '&lt;li&gt;'+filename+'&lt;/li&gt;');
                 });
                 $("#fileNames").append('&lt;/ul&gt;');
               }     
              });
          });
  
      &lt;/script&gt;
  </code></pre>
  
  <p>HTML code is as follows:</p>
  
  <pre><code>&lt;div id="fileNames"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But I get the following error when I run the code in chrome and firefox:</p>
  
  <blockquote>
    <p>chrome: XMLHttpRequest cannot load file:///E:/Test/xml/. Received an
    invalid response. Origin 'null' is therefore not allowed access.</p>
    
    <p>Firefox: ReferenceError: $ is not defined</p>
  </blockquote>
  
  <p>I have tried googling a lot but the error is not resolved. </p>
  
  <p>Your help would highly be appreciated.</p>