Include jQuery Using JS Shorthand

Question

So I'm working on a site, and we need to check if jQuery is defined before writing it to the page. I want to convert it to use JS conditional shorthand, but for some reason when I do that the statement does not execute. Here is my code:

Original (this works, tested):

if (typeof jQuery == 'undefined') {
    document.write('<script type="text/javascript" src="', JSPATH_REL_symc + 'jquery-1.4.2.min.js','"><\/script>');
}

That version works perfectly. Now I replaced it with this, and for some reason I'm having issues:

New w/Shorthand:

(typeof jQuery == 'undefined') ? document.write('<script type="text/javascript" src="', JSPATH_REL_symc + 'jquery-1.4.2.min.js','"><\/script>') : '';

Any idea what is wrong with this syntax?

Thanks.

Answer 1

Nothing appears to be wrong with it at first glance. (The var JSPATH_REL_symc is defined elsewhere, yes?). The code is a little funky (mixing string concatenation and multiple arguments to document.write — document.write(str, str2 + str3, str4)), but that is easily fixed. Also you ought to be able to simplify (and shorten) the code even further:

this.jQuery || document.write('<script src="'
                              + JSPATH_REL_symc
                              + 'jquery-1.4.2.min.js"><\/script>');

The type attribute of the script tag isn't mandatory, all browsers will implicitly evaluate its contents or the linked file as JavaScript.

A quick test shows this code in action: http://jsfiddle.net/ZWQqM/ (minus the JSPATH argument, and adding in an "onload" event attribute to the script tag to demonstrate that it is successful.)

Answer 2

Your code looks a little wonky since you're not actually doing anything in the second part of the conditional and this is probably causing a syntax error.

Basically, when the condition is false, I think it's evaluating to:

'';

which isn't valid. Usually, you would use it like this:

var someString = (someTest == true) ? "Great" : "Bad";
document.write(someString);

Since you're using document.write inside of the conditional; I think you have two options:

1. Move the conditional inside of the document.write, or
2. Remove the quotations marks from the second portion of the conditional

Try this:

// Option 1
document.write((typeof jQuery == 'undefined') ? '<script type="text/javascript" src="', JSPATH_REL_symc + 'jquery-1.4.2.min.js','"><\/script>' : '');


// Option 2 -- EDIT: This apparently isn't valid syntax due to the : ; at the end. Thanks @LarsH
(typeof jQuery == 'undefined') ? document.write('<script type="text/javascript" src="', JSPATH_REL_symc + 'jquery-1.4.2.min.js','"><\/script>') : ;

Personally, I think the if statement is clearer though.

EDIT: As stated by Ryan in the comment below, ''; is valid, so I'm not quite sure why that particular code is throwing an error. Can you give a screenshot or description of the error?