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 ...
snaffle's avatar
snaffle
Expert

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.