Filter content search box doesn't work?
Closed this issue · 23 comments
Hi guys,
Thank you for such a wonderful theme!
On my installation instance filter content search box doesn't seem work.
Am I the only one or?
I have the script pointed out to the correct script location.
This is written in the footer.html
<script src=/theme/apaxy.js></script>Apaxy.js is the newest, I would say.
Any tips and tricks?
Thank you! 👍
It is strange that the path of the js file is an absolut path. It should probably be a relative path (without the initial slash /). Unless you have installed apaxy at the root level of your web server.
Can you check if you have some errors in the web console or some non-loaded resources in the network monitor?
Hi,
Thank you for your reply.
I have fixed one that problem, now I'm getting the other one.
apaxy.js:7 Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined
at apaxy.js:7
Here is the problem:
var a = indexes[i].getElementsByTagName('a')[0];EDIT:
Filter content works, but the apaxy.js is breaking because of the bug on the line 7.
I have removed the whole thing, and now it works. 👍
// fix links when not adding a / at the end of the URI
var uri = window.location.pathname.substr(1);
if (uri.substring(uri.length - 1) !== '/') {
var indexes = document.getElementsByClassName('indexcolname');
var i = indexes.length;
while (i) {
var a = indexes[i].getElementsByTagName('a')[0];
a.href = '/' + a.getAttribute('href', 2);
}
}Can you indicate the browser and version you're using?
What version of apaxy are you using? What branch of the git repo? Have you changed anything to any file (especially the header or the footer)?
Is your url public or private? (ie. can we have a look at it or not?)
Have you installed apaxy at the root level of your web server or not?
Hi
if (uri.substring(uri.length - 1) !== '/') {
var indexes = document.getElementsByClassName('indexcolname');
for (let i of indexes) {
var a = i.getElementsByTagName('a')[0];
a.href = '/' + a.getAttribute('href', 2);
}
}On firefox 65.0.2, it solved the problem.
Does it work for you all too ?
edit : sorry, first message on github, got to get used to the editor !
@woodrowbarlow I do also see the same error on my dev instance. Can you please check if the search bar code needs optimization? @the-nalexx is proposing a new version of the code.
@the-nalexx I edited you message so that it renders better on GitHub. You can see this page to understand how to beautifully format your code in issues.
thank you !
@oupala i didn't write that bit of code, it has existed in apaxy since before you took over - i just moved it into apaxy.js. i don't even know what it's for and it isn't necessary for the filter code.
the solution posted by @the-nalexx seems sane to me.
the fact that this prevented the rest of the javascript from loading is a good argument for sticking it in an object and initializing it once the page has loaded, like i did with the filter code. that way, if one component breaks it won't affect the other components.
You're right @woodrowbarlow sorry for being mistaken.
This code come from a very old commit made by @hazcod and @wblondel. Do you guys wanna fix this? Or do we take the change proposed by @the-nalexx?
Hello,
I'm not sure to understand why I'm tagged on this issue, I don't remember contributing to this project at all...
@oupala do you have a link to the commit? Thank you 😄
@wblondel I might have been mistaken, but you seem to be mentioned in this commit.
Oh, I see it now. Actually, I commented on this commit the following :
"Broken links since this commit. It does not affect links on icons though.
If I remove the new JS code, it works again
Config : Apache 2.4.17, on Windows"
It looks like I didn't know how to use "issues" at the time... ;)
I didn't make this commit, I just commented to say it broke links.
This was ages ago, and sadly I don't use apaxy anymore.
Best to revert that commit @oupala ?
If you don't want to maintain your commit, no problem @hazcod.
We'll try to take care of it by ourselves.
@the-nalexx Do you want to try to create a pull request for the change that you proposed earlier?
The problem is I'm not sure of what you're asking of me. As I said, I have signed in to github yesterday and have barely never used a git.
The reason why came here was because of this bug : it occured to me, I fixed it, but instead of keeping it for myself I wanted to report my solution to all.
For now, I dont understand all... push, pull, commit, merge... Just use this code so that it serves everyone. I'll come back :D
Ok @the-nalexx, don't worry, I'll take care of applying your code to the codebase.
Thanks anyway and happy discovery of git and GitHub!
I fixed the issue following @the-nalexx proposal in commit f8670f0.
Thanks also @dorianborovina for finding the bug!
Hi @oupala ,
I have this search issue also, I am using latest git version and nginx with fancyindex.
There is no error in the console log, also files (js,css,header,footer) are loading correctly.
footer.html (NOTE: apaxy folder is in document root.)
<div class="block">
{FOOTER-MESSAGE}
</div><!--/.postlisting-->
</div><!--/.wrapper-->
<div class="footer">
Apaxy by <a href="https://twitter.com/adamwhitcroft">@adamwhitcroft</a>
</div><!--/.footer-->
<script src=/apaxy/theme/apaxy.js></script>
I have a test server up with apaxy installed. Let me know if you want to see.
Thanks.
You can post your server ip on an instance of privatebin (such as framabin), with a short lifetime (around 1 week).
What is the git commit of the version of apaxy that you're using?
Ok, here is the link
I have just cloned the repo an hour ago. so its the latest.
9d15cc5 (HEAD -> develop, origin/develop, origin/HEAD) Merge branch 'master' into develop
Chrome Version: 75.0.3770.80
Here is your nginx html markup:
<link href="/apaxy/theme/style.css" rel="stylesheet">
<div class="wrapper">
<!-- we open the `wrapper` element here, but close it in the `footer.html` file -->
<ol class="breadcrumb" id="breadcrumb">
</ol>
<input type="search" id="filter" placeholder="filter contents" />
{HEADER-MESSAGE}
<table id="list">
<thead>
<tr>
<th style="width:55%"><a href="?C=N&O=A">File Name</a> <a href="?C=N&O=D"> ↓ </a></th>
<th style="width:20%"><a href="?C=S&O=A">File Size</a> <a href="?C=S&O=D"> ↓ </a></th>
<th style="width:25%"><a href="?C=M&O=A">Date</a> <a href="?C=M&O=D"> ↓ </a></th>
</tr>
</thead>
<tbody>
<tr>
<td class="link"><a href="../">Parent directory/</a></td>
<td class="size">-</td>
<td class="date">-</td>
</tr>
<tr>
<td class="link"><a href="small.flv" title="small.flv">small.flv</a></td>
<td class="size">296.2 KiB</td>
<td class="date">2014-Feb-16 18:49</td>
</tr>
<tr>
<td class="link"><a href="small.mp4" title="small.mp4">small.mp4</a></td>
<td class="size">374.6 KiB</td>
<td class="date">2014-Feb-16 18:49</td>
</tr>
<tr>
<td class="link"><a href="small.ogv" title="small.ogv">small.ogv</a></td>
<td class="size">428.0 KiB</td>
<td class="date">2014-Feb-16 18:49</td>
</tr>
<tr>
<td class="link"><a href="small.webm" title="small.webm">small.webm</a></td>
<td class="size">224.1 KiB</td>
<td class="date">2014-Feb-16 18:49</td>
</tr>
<tr>
<td class="link"><a href="test.mp4" title="test.mp4">test.mp4</a></td>
<td class="size">0 B</td>
<td class="date">2019-Jun-07 12:47</td>
</tr>
</tbody>
</table> <div class="block">
{FOOTER-MESSAGE}
</div><!--/.postlisting-->
</div><!--/.wrapper-->
<div class="footer">
Apaxy by <a href="https://twitter.com/adamwhitcroft">@adamwhitcroft</a>
</div><!--/.footer-->
<script src=/apaxy/theme/apaxy.js></script>And here is the default apache hmlt markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index of /files</title>
<link rel="stylesheet" href="/files/theme/style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.1.3/dist/css/lightgallery.min.css" integrity="sha256-oPZ2OUkKul2aJQeDwKoO1p+DpvFR+w17n7YXydvFRWU=" crossorigin="anonymous">
<div class="wrapper">
<!-- we open the `wrapper` element here, but close it in the `footer.html` file -->
<ol class="breadcrumb" id="breadcrumb"></ol>
<input type="search" id="filter" placeholder="filter contents" />
<table id="indexlist">
<tr class="indexhead">
<th class="indexcolicon"><img src="/files/theme/icons/blank.png" alt="[ICO]" /></th>
<th class="indexcolname"><a href="?C=N;O=D">Name</a></th>
<th class="indexcollastmod"><a href="?C=M;O=A">Last modified</a></th>
<th class="indexcolsize"><a href="?C=S;O=A">Size</a></th>
</tr>
<tr class="even">
<td class="indexcolicon"><a href="/"><img src="/files/theme/icons/folder-home.png" alt="[PARENTDIR]" /></a></td>
<td class="indexcolname"><a href="/">Parent Directory</a></td>
<td class="indexcollastmod"> </td>
<td class="indexcolsize"> - </td>
</tr>
<tr class="odd">
<td class="indexcolicon"><a href="foldername/"><img src="/files/theme/icons/folder.png" alt="[DIR]" /></a></td>
<td class="indexcolname"><a href="foldername/">foldername/</a></td>
<td class="indexcollastmod">2016-07-29 03:08 </td>
<td class="indexcolsize"> - </td>
</tr>
<tr class="even">
<td class="indexcolicon"><a href="file.html"><img src="/files/theme/icons/html.png" alt="[html]" /></a></td>
<td class="indexcolname"><a href="file.html">file.html</a></td>
<td class="indexcollastmod">2019-03-02 16:15 </td>
<td class="indexcolsize">4.3K</td>
</tr>
</table>
<div class="block">
{FOOTER-MESSAGE}
</div>
<!--/.postlisting-->
</div>
<!--/.wrapper-->
<div class="footer">
Apaxy by <a href="https://twitter.com/adamwhitcroft">@adamwhitcroft</a>
</div>
<!--/.footer-->
<script src=/files/theme/apaxy.js></script>
</body>
</html>As you can see, your markup generated by nginx is slightly different from the one generated by apache.
The markup for each file differs:
- 3 cells per row for nginx (filename is in the first cell link)
<tr>
<td class="link"><a href="small.webm" title="small.webm">small.webm</a></td>
<td class="size">224.1 KiB</td>
<td class="date">2014-Feb-16 18:49</td>
</tr>- 4 cells per row for apache (filename is in the second cell indexcolname):
<tr class="even">
<td class="indexcolicon"><a href="file.html"><img src="/files/theme/icons/html.png" alt="[html]" /></a></td>
<td class="indexcolname"><a href="file.html">file.html</a></td>
<td class="indexcollastmod">2019-03-02 16:15 </td>
<td class="indexcolsize">4.3K</td>
</tr>You should then try to make nginx generate 4 cells per row (for apache, this is configurable using the IndexOptions option).
And as you can see, the missing cell is the indexcolicon cell, the one referencing the icon.
You can also try to change this line and to replace:
var text = row.getElementsByTagName('td')[1].textContent.toLowerCase();by
var text = row.getElementsByTagName('td')[0].textContent.toLowerCase();because the name of the file is in cell 0 (the first one) for nginx and in cell 1 (the second one) for apache.
Thanks for your detailed answer 👍 .
- Yes, search function works by modifying this line (it seems you have linked correct line, but pasted wrong line above).
- I checked the code and found classname references like indexhead, indexcolname which is not available with nginx. Also lightgallery.js makes use of apache specific classname.
- So, there are many minor adjustments needed to be done to make apaxy work with nginx.
If you are(or anyone) interested in making nginx mod, i can help with nginx setup related task/testing server(if necessary) etc.
Thanks for the review. Ihave edited and fixed my previous comment.
If you're ok to maintain an nginx fork of apaxy, it is ok. We'll see if the changes are huge or not, if it needs to be a fork, a branch, or if we can improve apaxy to make it work with both apache and nginx.