7 Replies Latest reply: Jul 13, 2013 5:26 PM by Herbert2001 RSS

    How do I call the jquery library?


      I seem to have a hole in my knowledge about using jquery - I have a lot of jquery effects in my web page, and as I've installed some of them, it calls for loading a different version of jquery from ajax.googleapis.com. So now I've called jquery in to the page 3 times...like this: 


      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    

      <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"type="text/javascript"></script>


      I would have thought if I call in the latest version of jquery once, it will make all my jquery stuff work. But each plug in seems to need a different version of jquery to function and one of my jquery sliders isn't working. If I remove one of the scripts above, it WILL work, but then none of the other jquery effects will work!

        • 1. Re: How do I call the jquery library?
          Mike M Community Member

          If a script will work with jquery 1.4, it'll work with 1.8 (or 1.9 or 1.10). The latest would be the only one you need, but..... and this is probably important in your case...


          Not all jquery plugins or scripts "play well together", even if you add a "no conflict" declaration to your jquery script, and... using the remote scripts on Google servers you CANNOT do this.


          You can download your own jquery scripts here and run them locally, which gives you more flexibility.


          I have a really cool jquery menu on one site but it totally killed the ability to use Fancybox on the gallery page. The client wanted the menu more so I had to find another script for image display.


          Sometimes you have to choose what to keep and what to abandon with jquery.

          • 2. Re: How do I call the jquery library?
            Nancy O. MVP

            jQuery's latest from their CDN works with just about every jQuery plugin I use.   In rare cases, when it doesn't, I add jQuery Migrate for older plugins or I try to find a more current ver of the plugin.


            <script src="http://code.jquery.com/jquery-latest.min.js"></script>

            <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>


            I try to avoid any plugins that require jQuery 1.5 or earlier.



            Nancy O.

            • 3. Re: How do I call the jquery library?
              idratherbeskiingonwombats Community Member

              It's now all working, but the frustrating thing it SHOULDN'T be working. In desperation I just cut and pasted a chunk of code randomly in a different place and accidentally tested the page before deleting the code from it's original spot, and unbelievably, it worked. So there's multiple calls of multiple scripts, it's madness. It seems to have a lot to do with the order in which the scripts are called. This is what I've ended up with, this insane screed of code, (just before the closing body tag!) and I'm too scared to change a single line because it will mess the whole thing up again. Once my nerves have settled I will go back and pick my way through the code trying to delete what isn't necessary.


              <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script> 

              <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>

              <script src="tkahn-Smooth-Div-Scroll-9df8fde/js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>

              <script src="tkahn-Smooth-Div-Scroll-9df8fde/js/jquery.mousewheel.min.js" type="text/javascript"></script>

              <script src="tkahn-Smooth-Div-Scroll-9df8fde/js/jquery.kinetic.js" type="text/javascript"></script>

              <script src="tkahn-Smooth-Div-Scroll-9df8fde/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>


              <script type="text/javascript">

                      $(document).ready(function () {       


                              autoScrollingMode: "onStart"





              <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>

              <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

              <script type="text/javascript" src="js/slide-out-tip-script.js"></script>

              <script type="text/javascript" src="js/rolling.js"></script>

              <script type="text/javascript" src="js/dropdownmenu.js"></script>

              <script type="text/javascript" src="js/easySlider1.7.js"></script>

              <script type="text/javascript" src="js/bigpic.js"></script>

              <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

              <script type="text/javascript" src="source/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>

              <script type="text/javascript" src="source/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

              <script type="text/javascript" src="js/slider-revolution.js"></script>


              <script type="text/javascript">





                  // Remove the class of child and grandchild

                  // This removes the CSS 'fallback'

                  $("#nav ul.child").removeClass("child");

                  $("#nav ul.grandchild").removeClass("grandchild");

                  // When a list item that contains an unordered list

                  // is hovered on

                  $("#nav li").has("ul").hover(function(){

                  //Add a class of current and fade in the sub-menu


                  }, function() {

                  // On mouse off remove the class of current

                      // Stop any sub-menu animation and set its display to none

                      $(this).removeClass("current").children("ul").stop(true, true).css("display", "none");






                              auto: true,

                              continuous: true,

                              controlsShow:        false,

                              pause:            4000,

                              speed:         2000,






              • 4. Re: How do I call the jquery library?
                idratherbeskiingonwombats Community Member

                I think I did try using <script src="http://code.jquery.com/jquery-latest.min.js"></script> for the latest version at one point, but still didn't work.


                Then I saw some comments saying that it's better practise to call a specific version as it's likely the user will already have it in their cache and thus load more quickly. Would you agree with that Nancy, or is it not an issue?


                Also the thought of launching a website dependant on an ever changing code library freaks me out a little -  I can imagine them releasing a new version that accidentally messes everything up?

                • 5. Re: How do I call the jquery library?
                  Mike M Community Member

                  My personal preference is to use a "local" jquery file.
                  Good example: Google was down for nearly four hours Monday in many parts of the world. I don't know if their "api" library was affected by that or not, but I'd hate for my jquery plugins to not work because someone else's server is down. If my server is down, no one's going to see the site anyway, but when it's back online everything will still work.

                  • 6. Re: How do I call the jquery library?
                    Nancy O. MVP

                    the thought of launching a website dependant on an ever changing code library freaks me out a little -  I can imagine them releasing a new version that accidentally messes everything up?

                    It happens.  Fancybox stopped working for me when jQuery 1.8 came out.  But the Migrate script took care of that problem.   Also, CDN libraries are regularly updated to fix problems, often before we even notice there was a problem.  I don't lose sleep over this.


                    CDN's make the web faster for everyone because, as you say, it's very likely that the end user already has the latest script in their cache.


                    The reason your page works is because 1.8 is listed last.  You should be able to remove the duplicate scripts above it and it should still work.  Give it a try.


                    Nancy O.

                    • 7. Re: How do I call the jquery library?
                      Herbert2001 Community Member

                      For those reasons the best approach is to load the CDN version when available, and if unavailable load up a local version. That way you get the best performance with CDN, and in the worst case scenario (CDN down) it just loads up your local version.


                      Example code (html5 boilerplate taken as a reference):


                      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

                      <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>