Javascript update with server transition

[ebeshero]

After I transitioned newtfire to the new Debian server, I noticed that all of Brecon project's Javascript broke! After studying and researching the problem (and verifying that it wasn't a problem with your paths to the JS files), I discovered it's to do with a package on my server that wants to redirect anything inside directories named "javascript" to another directory of outside our web ecosystem that's part of a central package for the server. This is a weird thing distinct to the version of Linux I'm now running. The upshot is, to fix it, you must NOT have any directories named "javascript" and we have to treat that like a reserved word. (Here's the Stack Overflow post that clued me in to the problem: https://stackoverflow.com/questions/27906974/403-forbidden-only-on-javascript-folder )

Since this was all due to my transitioning to a new server, I changed the directory name on the server and I actually went in and edited (on the server only!) all the HTML files I could find that were trying to serve JS. I think I got them all, but...that was a very brittle thing I did, b/c I didn't push any changes to your repo: I just edited directly on the web server.

What you want to do, systematically and thoroughly, is: 1) rename your "javascript" directory to just "js" 2) find and replace all paths pointing to javascript/something.js to js/something.js.

That'll be some fun. You can find and replace in files using oXygen, so that'll save some time. Sorry about the change, but(!) keep it in mind for future applications: It's apparently dangerous to use that word "javascript" as a file directory name on a web server running Linux and Apache.

You all have some extra copies of files that I don't think you're using anyway in your project for publication, so this might be a good moment to revisit and clean up in the process of changing to a new name for the javascript folder! @haggis78 @alnopa9 @amberpeddicord

[haggis78]

@ebeshero I finally got around to doing this as I was working on some unfinished Brecon business. It seems to have worked, but the new js I wrote for the unfinished business -- the http://brecon.newtfire.org/html/witnesses/patent-collection.html page -- works on my computer but only partially works on the server. It fires the test "The page loaded! Yay!" popup, so the path to the js file is correct on the server, but the buttons on the page don't work when it's opened online from the server.

[ebeshero]

@haggis78 Is the HTML on the server the same as the HTML on your local directory? Be careful—remember—I made some changes by hand on the server to get your JavaScript working there. Your local files on GitHub maybe don’t match what I have on the server—see my comments above. I am sorry for my brittle solution—imposed in haste once I realized the issue with having a directory named “javascript” on my new Debian server.

[haggis78]

@ebeshero Yes, I made some corrections to the base XML, fixed the XSLT to output HTML with js/ in the filenames, and created and pushed new HTML pages of the individual witness transcripts. All of that works just fine. (I haven't done the multi-column comparison page yet.) So other than that page, the brittle solution is now fixed. The issue is a brand new file, palaeog.js, which is solely for the patent-collection.html page. It works fully on my computer but only partially on the server. I'm trying to figure things out by myself as much as possible; I'm only bugging you here because I'm assuming there's something specific to the server environment that I don't know.

[ebeshero]

@haggis78 The only thing I am aware of is simply not to use or point to a directory named javascript on the server. If your other new files are working, there may be a mismatch somewhere in the code. Try looking at the page on the server using the developer tools in your web browser. There is a JS console that can show you what happens with event listeners and function responses.

[haggis78]

@ebeshero I looked at the developer console and it didn't tell me anything. But here's where it gets weird. It turns out that the js buttons DO work on the server -- but they toggle the wrong paragraphs on and off. Instead of the paragraph right below the button, which is identified by id, it's toggling the paragraph four paragraphs below. The first button should show/hide <p id="n1">, which it does when opened from my hard drive, but when opened on the web from the server, it shows/hides <p id="n5">, and so on all the way down the page. I wondered if the SSI was throwing it off somehow but @id="" isn't used there. I'm sure you're grading right now, and this isn't urgent on my end. I'll let you know if I figure it out, though.

[ebeshero]

@haggis78 Curiouser and curiouser, as Alice said! Well, I am trying not to start a stack of grading, so...let me see if I can tell what’s happening and if I can replicate what you are seeing.

[ebeshero]

@haggis78 Aha! I see that the problem emerges with the addition of your SSI file, because it contains several <button> elements. Here is your SSI:

<div class="header">
    <img src="../../img/background/brecon.svg" alt="Image of 'Brecon Collegiate Church and School' in script across the top"/>
</div>
<div id="navbar">
    <div class="navbar">
        <a href="../../index.html">Home</a>
        <div class="dropdown">
            <button class="dropbtn">About<i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="../about/history.html">History</a>
                <a href="../about/Glossary.html">Glossary</a>
                <a href="../about/BreconPeople.html">People</a>
                <a href="../about/methodology.html">Methodology</a>
                <a href="../about/Project_Team.html">About Team</a>
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn">Analysis<i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="../analysis/Timeline.html">Timeline</a>
                <a href="../analysis/TextualAnalysis.html#codicum">Stemma</a>
                <a href="../analysis/Graphs.html">Graphs</a>
                <a href="../analysis/string-length-heat-map.html">String Length Heat Map</a>
                <a href="../analysis/similarity-heat-map.html">App Similarity Heat Map</a>
                <a href="../analysis/network.html">Network</a>
                <a href="../analysis/TextualAnalysis.html">Textual</a>
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn">Witnesses<i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="texts.html">Source Descriptions</a>
                <a href="patent-collection.html">Patent Roll</a>
                <a href="display-R.html">Manuscript R</a>
                <a href="display-C.html">Manuscript C</a>
                <a href="display-D.html">Manuscript D</a>
                <a href="display-I.html">Manuscript I</a>
                <a href="display-O.html">Manuscript O</a>
                <a href="display-W.html">Printing W</a>
                <a href="display-S.html">Printing S</a>
                <a href="display-J.html">Printing J</a>
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn">Comparison<i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="../comparison/comparison.html">Transcripts</a>
                <a href="../comparison/edition2.html">Anonymous Blocks</a>
            </div>
        </div>
    </div>
</div>

See? There's going to be a mismatch here. The "zeroeth" button on the server is going to be connected to the navigation bar, and that's the one now designated for holding your event listener. That is probably not quite what you want to have happen here.

My suggestion would be to apply class attributes to your internal button elements that aren't part of the navigation bar. Then you'd redo your buttons variable to getElementsByClassName instead of TagName.

[haggis78]

@ebeshero Oh, that makes sense! I hadn't even thought of <button> elements. Thank you!

[ebeshero]

@haggis78 I was thinking about maybe a simpler way to do your JavaScript, perhaps with just one function attached to all your buttons with a certain @class. To my surprise, apparently we can now use XPath in JavaScript, which might make things a little easier: You could write one function that would select the next following sibling element or the first child element to show / hide. Take a look at this document.evaluate syntax: https://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript

Caution: According to the documentation (a year old?), I guess this might not work in Internet Explorer yet(?) but does work in all the other major browsers. But maybe it does now--I haven't tried this yet! So, let me know if you get it working...I'll be curious to try it

[haggis78]

@ebeshero I played around with this for a bit. Putting @class on the buttons seems to be working fine, and identically on the server and from my hard drive, as it should be. Looking for more examples of XPath in JavaScript, I noted that this page was last updated four days ago and still says that IE doesn't support it, so I decided not to pursue it: https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate But if that changes, and I wind up helping students with some project with a lot of js, this may come in handy.