A lesson learned in including javascript libraries properly

Posted on November 17, 2014  •  3 minutes  • 454 words

I figured I’d sit down and quickly add a navigation header to my site just to have it in place, so that I could add links to it later.

After reading over the Bootstrap documentation, I thought it seemed rather straight-forward, so I quickly whipped up a few lines of Jade into a serviceable navigation header with a few link elements in it — one to the homepage and one to the blog portion.

(As a quick side note, I’m really enjoying using Jade , if only for the fact that it helps avoid the pesky problem of forgetting closing div and span tags.)

Satisfied with the look of the navigation header, I resized my browser and the navigation did indeed collapse just like the documentation advertised, and I was pretty pleased with how simple it had all been.

“Just a matter of including the Bootstrap javascript libraries and any dependencies and we’ll be all set.” I thought to myself. So I downloaded the compiled javascript files provided by bootcamp and added them to a folder in my harp server directory, and appended these two lines near the top of my layout.jade document at the root of my server.

script((src = "/js/bootstrap.min.js"));
script((src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"));

“Simple,” I thought “the precompiled Bootstrap css is right on my server and the jquery is just served by Google’s CDN.”

But when I ran the harp server command from the terminal, the supposedly now collapseable navigation — the navigation still didn’t collapse. So of course my first thought was that I referencing an incorrect id in my layout.jade file, or that I was somehow calling a javascript plugin with the wrong name.

I carefully reread the documentation, checking each id and plugin name. It seemed okay to me. Next, I searched for a separate source of documentation. I found a few articles and even a youtube video, but it really seemed like I had added the lines properly for the navigation header to work.

Finally, I figured I’d just comment out all my navigation code and shoehorn in Bootstrap’s pure HTML into my layout.jade. Aha! It didn’t work either, so I double-checked the two lines of code I had added earlier to include the necessary javascript libraries. I could see that my server was serving them correctly, because they were properly included in the page source. But, crucially, I had messed up the order in which I had added the two files. I quickly switched the order:

script((src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"));
script((src = "/js/bootstrap.min.js"));

And suddenly everything was up and running as it should.

Lesson learned: Include javascript dependencies before the plugin file itself.

And also maybe don’t work on code when I’m sorely in need of some sleep.