I figured, hey, jQuery is logical to code, and so I came up with a logical way to fix it in my head.  It went something like this:

I need a way to work out whether a script was required on the page, so I decided I’d apply a unique class to the body for each plugin I required on the page. Then, using multiple if statements in jQuery,  I’d append the script tag with the relevant url to the right plugin, and fire off the plugin function while I was at it depending on what classes were found on the body.

As it turned out, only half of this logic worked. The logic behind checking what classes were applied to the body was spot on, it worked a treat, but appending the scripts to the head didn’t work. After a bit of research, I found that

jQuery detects that you’re trying to create a SCRIPT element and will automatically run the contents of the element within the global context.

source

I thought “fair enough, jQuery is being clever” but my scripts were still not being run. I researched further, and finally stumbled across the holy grail to my problem, getScript.

What is getScript?

GetScript is a jQuery ajax function that loads a script from your specified url and has an extremely useful callback function for when the script is loaded. This is exactly what I needed.

For those of you who maybe understand a bit more ajax, jQuery’s documentation states that this getScript function is simply a shorthand version of this:-

 $.ajax({   url: url   dataType: 'script',   success: success }); 

The shorthand getScript version simplifies this however, so set to work with it.

Putting it to use!

We are going to go back to our original logic and replace it with our new jQuery function. Here’s how it looks when we turn that pseudo code (logic) into working code.

 $(document).ready(function() {   if $('body').hasClass('script') {     $.getScript('script/url.js');     fireoffthefunction();   } }); 

Improvement!

This isn’t the end though. We are only halfway to making the most intuitive fix that we can. There are two enhancements that I made, the first being the most important. If you’ve read the documentation for jQuery’s getScript function, then you’ll have noticed its callback argument. Instead of firing the functions from the script we are loading below it, why not make use of its callback function and fire it once the script loads? Who knows, what if our script fails to load; our current version would then stop all jQuery on the site working! Not what we want.

 $(document).ready(function() {   if $('body').hasClass('script') {     $.getScript('script/url.js'), function() {     fireoffthefunction();     });   } }); 

Less important for most people, but useful for me was my last improvement. I figured, why should I do the work when jQuery can do it for me? Most of my jQuery plugins hook to a certain element such as select, or a div#slider, so why manually search through the html files and assign classes to the body when we can make jQuery search through for me?

Heres a small snippet of code from one of my current projects which brings together everything we’ve discussed and learnt.

 $(document).ready(function() {   if ($('select').length > 0){     $.getScript('js/jquery.stylish-select.min.js', function() {       $('select').sSelect();     });   } }); 

Using jQuery’s ‘.length’ function we search through the document for the element ’select’. If it is present (a.k.a more than 0) then we run the stylish select script, and if it loads we’ll apply the script to the element.

Further Discussion

I do not claim to be a jQuery ninja, or anything of the sort. If you can further improve this simple but useful concept or have another idea on solving this common issue with ease, then I’d love to hear them; I’m always up for an insightful discussion.