16 Replies Latest reply on Oct 30, 2012 12:34 PM by Asa B

    JQuery - Multiple versions

    Chetanya Jain Level 1

      Hi,

       

      CQ5.4 uses jQuery version 1.4.4, and the latest version available is 1.7.2. For some reasons we would like to use 1.7.2 version of the jQuery, but its clashing with the OOB jQuery version.

       

      I would like to know:

      • How do we use jQuery latest pack with CQ5 (noConflict)
      • Will there be an impact in the author / publish instance if 1.4.4 is replaced with 1.7.2?
      • Some of the CQ5 libraries are dependent on OOB jQuery (1.4.4) so in such cases how can I work with both the versions without any conflict?

       

      Thanks,

      Chetanya

        • 1. Re: JQuery - Multiple versions
          Tomalec W Level 1

          Hi,

           

           

          I have similar problem, but I'm afraid that we cannot use latest pack with CQ5.

          There is:

          // Expose jQuery to the global object

          window.jQuery = window.$ = jQuery;

          at the bottom part of /etc/clientlibs/foundation/jquery.js

          Even they stored previous version of jQuery in

          // Map over jQuery in case of overwrite

          _jQuery = window.jQuery,

           

           

          // Map over the $ in case of overwrite

          _$ = window.$,

           

          They do not use it later.

           

           

          Maybe we can try to add jQuery.noConflict(true) just after foundation/jquery.js is loaded, but it's being done asynchronously, sou only idea I have is to overwrite foundation clientLib.

          • 2. Re: JQuery - Multiple versions
            Ryan Lunka Level 3

            The version of jQuery that the CQ platform uses (1.4.4) should not conflict with other versions.  This version is namespaced to $CQ and they use .noConflict() to release $.  This all happens via ClientLib JS inclusion.  If you are extending the foundation page component, which is generally the case, the clientlib inclusion is in headlibs.jsp.  Make sure that any further inclusions of JS libraries (including another version of jQuery) occur after this headlibs.jsp is included.

             

            Some best practices to keep in mind:

             

            • Don't try to include JS libraries by simply requesting them from out in the world.  Use Client Library folders.
            • Make sure you are allowing headlibs.jsp to be included and to run.  If that isn't possible or you aren't extending the foundation page component, make sure that the same clientlib is included.
            • Don't try to replace the OOTB version of jQuery.  The CQ platform uses it, so trying to swap it out may cause bad things to happen.
            • You don't HAVE to, but I highly recommend you namespace any versions of jQuery that YOU include.  This will potentially save you some headaches down the road.  Again, use clientlibs to include jQuery.
            • Make your app-specific components use your included version of jQuery.  You can use the OOTB one namespaced to $CQ, but I would just leave it alone.  Let it exist to support the platform and nothing more.

             

            Hope this helps.

            1 person found this helpful
            • 3. Re: JQuery - Multiple versions
              Tomalec W Level 1

              Thanks for reply Ryan,

               

               

              • I use CQ5.5, but I need jQuery newer than 1.7.
              • I use Client Libraries but I still cannot be sure (AFAIK) if some particular clientLib was loaded into html before or after foundation jQuery in admin view.
              • So do you mean I need to namespace ANY external library I include? So if I have myApp. namespace for one app, myOtherApp. for other app, and if both uses e.g. jQuery or Backbone I have also to create noCQ.Backbone, noCQ.jQuery? I thought that's what you created CQ. and _g namespaces for?
              • Well, that's the problem I WANT to do so but I cannot find a way to make sure that window.jQuery i the window.jQuery I have included, not the one CQ includes.
              • 4. Re: JQuery - Multiple versions
                Tomalec W Level 1

                I think that issue could be fixed by changing current /etc/foundation/jquery.js l.9319

                // Expose jQuery to the global object

                window.jQuery = window.$ = jQuery;

                to

                // Expose jQuery to the global object

                window.jQuery = window._$  = _jQuery || jQuery;

                • 5. Re: JQuery - Multiple versions
                  justin_at_adobe Adobe Employee

                  Tomalec-

                  I would not recommend changing /etc/foundation/jquery.js as that change will likely be overwritten in an upgrade.

                   

                  It sounds like what you want is for:

                  window.$ = jQuery 1.8.1

                  window.jQuery = jQuery 1.8.1

                  window.$CQ = jQuery 1.7 (for CQ's purposes)

                   

                  If so, the best thing to do is create a new client library called (for example) my.jquery which contains jQuery 1.8.1. Set cq.jquery as a dependency of my.jquery. Then when you include my.jquery, you will know that cq.jquery is always included first.

                   

                  Regards,

                  Justin

                  1 person found this helpful
                  • 6. Re: JQuery - Multiple versions
                    Tomalec W Level 1

                    Thanks Justin,

                     

                    That was my proposition for upgrade of '/etc/foundation/jquery.js'

                     

                    This is exactly what I want to achieve.

                     

                    Sounds quite good, but then I will end with two jQueries include in publish unnecessarily.

                    • 7. Re: JQuery - Multiple versions
                      joel_triemstra Level 1

                      "Don't try to include JS libraries by simply requesting them from out in the world.  Use Client Library folders."

                       

                      Why is this a better practice than using a version hosted on Google, eg?

                      • 8. Re: JQuery - Multiple versions
                        Ryan Lunka Level 3

                        If you are JUST pulling in jQuery, then the difference is negligible.  However, you are likely going to have a bunch of your own written JS that use jQuery and you may be including other plugins.  You would want to create ClientLibrary dependencies so that they are all pulled in as one file and minified, instead of pulled in as separate requests.

                        • 9. Re: JQuery - Multiple versions
                          joel_triemstra Level 1

                          Gotcha, that makes sense. Is the pulling as one file a new feature to v5.5? I'm currently using v5.4, and when I do this for example

                           

                          <cq:includeClientLib categories="cq.foundation-main"/>

                           

                          I get two .js files included in my page.

                          • 10. Re: JQuery - Multiple versions
                            Ryan Lunka Level 3

                            No, I believe it was new in CQ5.4.

                             

                            If I remember correctly, clientlib dependencies will pull clientlibs in as separate files.  If you want to combine them into one, I would do so in a single app-specific clientlib (generally at etc/designs/<my-app>) that uses "embed" to pull in the relevant libraries.  Embed will combine them, where depdencies will not.  To embed, on the config node for your clientlib you use the String[] property "embeds" (may not have the 's') and list the categories of clientlibs that you want to embed.  Then your cq:includeClientLib script will reference the category of that client library.

                             

                            Someone correct me if that's wrong...I'm going off the top of my head.

                            1 person found this helpful
                            • 11. Re: JQuery - Multiple versions
                              joel_triemstra Level 1

                              Cool, thanks, I hadn't seen that property before (it's "embed" for the record). It looks like that property isn't totally recursive - e.g, if I want to embed A, which depends on B, which in turn depends on C, I need to explicitly embed A, B, and C, in the correct order. Whereas the "dependencies" property would handle that for me. Does that sound like what you saw also?

                              • 12. Re: JQuery - Multiple versions
                                joel_triemstra Level 1

                                Maybe I should fork this off to another thread, but... another interesting behavior of the embed property I'm seeing is that it appears to not take into account the behavior of the dependencies property, where a library is only included once. In other words, if I have clientlibs A and B, each of which depend on C, which depends on D, I could use the dependencies property, and includeClientLib for A and B, and then C and D would each be included once. However, if I use embed, including A and B leads to C and D each being included twice, which is unfortunate. Did you run into that?

                                • 13. Re: JQuery - Multiple versions
                                  Ryan Lunka Level 3

                                  I'm not sure I've run into that specific situation, but I have run into similar wierdness trying to test the ClientLib functionality.  It's not very well documented (as far as I've seen), which makes it more confusing.  The approach I take is to keep it simple, because these complicated cases do cause unexpected things to happen.  Your first scenario, where you have to explicitly embed A, B, and C in order confuses me.  I wouldn't expect that, nor do I understand how you are "specifying" order of embeds.  Really the only place I would try to use embed is embedding your component-specific clientlibs into a single app-specific one.  Everywhere below that level, I would use dependencies.  The functionality should respect that of components A, B, and C all depend on jQuery as clientlib D, that D only be included once.

                                   

                                  I could be wrong though.  I haven't sat down and tested out these complex situations in a while.  I would like to see some detailed documentation about this topic.  It frequently comes up and I've found very little in the way of best practices or even complete documentation about it.

                                  • 14. Re: JQuery - Multiple versions
                                    Asa B Level 1

                                    You might give require.js a shot, it was deisgned to handle these scenarios

                                    http://requirejs.org/

                                     

                                    Also, I'm not sure clientlibs lends itself to CDN hosting.

                                    • 15. Re: JQuery - Multiple versions
                                      joel_triemstra Level 1

                                      Asa B, are you using RequireJS on the server side, or on the client side?

                                      • 16. Re: JQuery - Multiple versions
                                        Asa B Level 1

                                        Hi Joel,

                                         

                                        Require.js is client side only. However there is server build optimization tool called r.js which duplicates much of the clientlibs functionality. r.js is based on uglify by default.

                                         

                                        Require may be used with or without r.js depending on your projects needs.

                                         

                                        Here's a link to a video that does a good job of making this a bit easier to understand

                                        http://youtu.be/VGlDR1QiV3A