Search code examples
javascripthtmlapachexmlhttprequestserverxmlhttp

Apache2 with xmlhttp

I have a JavaScript function where I pass a path/name of a server-side directory in-order to return the paths/names of sub-directories to an array. Additional console.log()s were added in-order to check the flow.

Below function was sourced from this answer and then tweaked a bit to match the need.

function loadSubDir(dir) {
  console.log("Initial method call with ", dir);
  let res = null;
  let path = null;
  let xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", dir, false);
  xmlhttp.send();
  if (xmlhttp.status == 200) {
    res = xmlhttp.response;
    $(res)
      .find(" td > a ")
      .each(function() {
        path = $(this).attr("href");
        console.log("Values for Categories : ", path);
        subDirs.push(path);
      });
  }
  subDirs.shift();
  return subDirs;
}

This works fine without any issue in my local Apache server where I use the default Apache configuration with only adding document root for the directory where this JavaScript file is available.

But if I use the same implementation on another Apache server environment, this FAILS. Having put logs, I noticed that "Values for Categories" log does not appear when running on server.

Is there any additional configurations needed or what could be the reason ?

Thank you!

Solution

  • The issue was how I have implemented $(res).find() method. In my local Apache server environment, the response was;

    <html>
 <head><title>Index of /XXXX-XXX</title></head>
 <body>
  <h1>Index of /XXXX-XXX</h1>
  <table>
   <tr><th valign="top"><img src="/icons/blank.gif" alt="[ICO]"></th><th><a href="?C=N;O=D">Name</a></th><th><a href="?C=M;O=A">Last modified</a></th><th><a href="?C=S;O=A">Size</a></th><th><a href="?C=D;O=A">Description</a></th></tr>
   <tr><th colspan="5"><hr></th></tr>
   <tr><td valign="top"><img src="/icons/back.gif" alt="[PARENTDIR]"></td><td><a href="/">Parent Directory</a></td><td>&nbsp;</td><td align="right">  - </td><td>&nbsp;</td></tr>
   <tr><td valign="top"><img src="/icons/folder.gif" alt="[DIR]"></td><td><a href="XXX/">XXX/</a></td><td align="right">2020-12-14 17:10  </td><td align="right">  - </td><td>&nbsp;</td></tr>
   <tr><td valign="top"><img src="/icons/folder.gif" alt="[DIR]"></td><td><a href="XXX/">XXX/</a></td><td align="right">2020-12-15 11:25  </td><td align="right">  - </td><td>&nbsp;</td></tr>
   <tr><td valign="top"><img src="/icons/folder.gif" alt="[DIR]"></td><td><a href="XXX/">XXX/</a></td><td align="right">2020-12-15 11:25  </td><td align="right">  - </td><td>&nbsp;</td></tr>
   <tr><td valign="top"><img src="/icons/folder.gif" alt="[DIR]"></td><td><a href="XXX/">XXX/</a></td><td align="right">2020-12-14 18:00  </td><td align="right">  - </td><td>&nbsp;</td></tr>
   <tr><td valign="top"><img src="/icons/folder.gif" alt="[DIR]"></td><td><a href="XXX/">XXX/</a></td><td align="right">2020-12-14 17:53  </td><td align="right">  - </td><td>&nbsp;</td></tr>
   <tr><td valign="top"><img src="/icons/folder.gif" alt="[DIR]"></td><td><a href="XXX/">XXX/</a></td><td align="right">2020-12-15 11:24  </td><td align="right">  - </td><td>&nbsp;</td></tr>
   <tr><td valign="top"><img src="/icons/folder.gif" alt="[DIR]"></td><td><a href="XXX/">XXX/</a></td><td align="right">2020-12-14 17:53  </td><td align="right">  - </td><td>&nbsp;</td></tr>
   <tr><td valign="top"><img src="/icons/folder.gif" alt="[DIR]"></td><td><a href="XXX/">XXX/</a></td><td align="right">2020-12-14 17:54  </td><td align="right">  - </td><td>&nbsp;</td></tr>
   <tr><th colspan="5"><hr></th></tr></table><address>Apache/2.4.29 (Ubuntu)Server at localhost Port 80</address>
 </body>
</html>

    So.. $(res).find(" td > a ") works.. Since we were using Apache o docker, the response was;

    <html>
 <head>
  <title>Index of /XXXX-XXX</title>
 </head>
 <body>
  <h1>Index of /XXXX-XXX</h1>
  <ul><li><a href="/"> Parent Directory</a></li>
  <li><a href="XXX/">XXX/</a></li>
  <li><a href="XXX/">XXX/</a></li>
  <li><a href="XXX/">XXX/</a></li>
  <li><a href="XXX/">XXX/</a></li>
  <li><a href="XXX/">XXX/</a></li>
  <li><a href="XXX/">XXX/</a></li>
  <li><a href="XXX/">XXX/</a></li>
  <li><a href="XXX/">XXX/</a></li>
  </ul>
 </body>
</html>

    here, instead of $(res).find("td > a") I needed to use the .find() method as $(res).find("li > a").

    Then it continued the execution.