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!
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> </td><td align="right"> - </td><td> </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> </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> </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> </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> </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> </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> </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> </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> </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.