Forum Discussion

snaffle's avatar
snaffle
Expert
7 years ago

Including Javascript files with JQuery dependancy

We've been able to find documentation on how to use Lithium's included JQuery library inline using:

 

<@liaAddScript>

 and that works a treat, but despite quite a lot of searches on the Community we're struggling to find out how we might include an external Javascript file that has JQuery as a dependancy, and have it use the included Lithium JQuery... so for example:

<script src="${asset.get('/html/assets/off-canvas.js')}" type="text/javascript"></script>

Whenever we do that we either get a "JQuery not defined" message or "jQuery is not a function".

Is that because we would have to modify the included file to work with Lithium's JQuery?

 

And is the alternative to include our own JQuery?

 

Thanks

 

Nathan

9 Replies

Sort By
  • snaffle's avatar
    snaffle
    Expert
    7 years ago

    Hi Payal,

     

    Thanks for the quick reply, and yes we know how to include it but including a second JQuery library was what we were hoping to avoid.

     

    But it looks like including it again is the only solution.

  • Payal's avatar
    Payal
    Director
    7 years ago
    Hi Snaffle,

    Then, Jquery is not defined might be of the following reasons:
    1.The order in which you load your scripts is not correct, if you use multiple scripts.
    2.If you are loading the jQuery library from any of the CDN, then please check that CDN link is working or not.

    You can include your jquery CDN in header.
    Let me know if this works.
    Thanks
  • snaffle's avatar
    snaffle
    Expert
    7 years ago

    Yes it works, but that wasn't the problem.

     

    Thanks for your suggestions anyway.

  • ttadej's avatar
    ttadej
    Advisor
    7 years ago

    Great question. We did this with Browserify Shim.

    You'd do something like this in your package.json:
    "browserify-shim": {
      "jQuery": "global:LITHIUM.jQuery"
    }

    Then in your bundle you can import Lithium's jQuery
    const $ = require('jQuery')

    More info here: https://github.com/thlorenz/browserify-shim

     

    OR...

    A less elegant way might be something like:

    var $ = window.LITHIUM.jQuery || {};

     

    You'd want to put your script includes in last_chance_html to ensure the Lithium object has loaded by the time your files load and make the assignment. I wouldn't recommend this, but it might work as a quick solution.

  • snaffle's avatar
    snaffle
    Expert
    7 years ago

    Thanks ttadej that's exactly the kind of information we were looking for.

     

    We actually have a mutiple skin set up that each have different JS includes so the first option is the one we'll look in to as we'd rather not dump them all in to last_chance_html and have them all loading when they don't need to.

  • marco55's avatar
    marco55
    Genius
    7 years ago

    If I'm understanding what you're going for, another option might be to include the asset through js with $(document).ready(), it should load after jquery.

     

    <@liaAddScript>
;
//optional js
$(document).ready( function () {
var my_script = document.createElement("script");
my_script.setAttribute("src","[asset_path]");
my_script.setAttribute( "type", "text/javascript" );
document.head.appendChild(my_script);
} );
})(LITHIUM.jQuery);
</@liaAddScript>
  • marco55's avatar
    marco55
    Genius
    7 years ago

    Yikes, sorry, I posted the syntax wrong...corrected:

     

    <@liaAddScript>
;(function($) {
    //optional js
$(document).ready( function () {
var my_script = document.createElement("script");
my_script.setAttribute("src","[asset_path]");
my_script.setAttribute( "type", "text/javascript" );
document.head.appendChild(my_script);
} );
})(LITHIUM.jQuery);
    </@liaAddScript>