2

I want to check if jQuery is already included on the page. I have seen several methods and finally settled on the following:

if ( (typeof jQuery === 'undefined') || !window.jQuery ) {
    document.write(unescape("%3Cscript type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'%3E%3C/script%3E"));
}

My question is: is there another/better way to do this? I sometimes still have a jQuery conflict because it is fetched twice. Thanks.

  • 1
    Seams like you are doing it OK. It's simple, it's fast and it works. – Marius Jun 27 '13 at 12:53
  • Where is your noConflict? – philwinkle Jun 27 '13 at 14:52
  • Below the above code I have jQuery.noConflict(); :) – Jongosi Jun 27 '13 at 15:00
7

For your situation, I think what you have is a good approach.. Though I'm not completely sure why it would sometimes fetch twice and other times not. When I include jQuery, both jQuery and window.jQuery are defined. However, you can try changing the code to something like this for consistency in your situation:

   //use &&
   if ( (typeof jQuery === 'undefined') && !window.jQuery ) {
        document.write(unescape("%3Cscript type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'%3E%3C/script%3E"));
    } else {
        if((typeof jQuery === 'undefined') && window.jQuery) {
            jQuery = window.jQuery;
        } else if((typeof jQuery !== 'undefined') && !window.jQuery) {
            window.jQuery = jQuery;
        }
    }

Note I'm very rusty on how js variables and the window object work, and I'm just going off the code logic you have.
Just a side note (and you may already be doing this), put this js in a js file and add it with your module's layout xml

<layout version="x.x.x">
    <handle> 
        <reference name="head">
            <action method="addJs"><script>pathto/yourmodulesJs/check_jQuery.js</script></action>
        </reference>
    </handle>
</layout>
| improve this answer | |
  • Or, if you want Google CDN jQuery with local fallback: magento.stackexchange.com/questions/3523/… – philwinkle Jun 27 '13 at 16:05
  • I may be wrong, but question was how do you check if you don't already have jQuery. I have seen many themes to use it, many modules use it too as well. And most add it in different ways, from different locations. Which causes conflicts. So How do you detect 100% that there is already jQuery loaded so you do not load it again? – Petar Dzhambazov Jun 27 '13 at 16:28
  • I was adding a sidebar to say that there is more than one way to add jQuery to the page. This may help with detecting. – philwinkle Jun 27 '13 at 16:32
  • @PetarDzhambazov The question didn't mention 3rd party modules or themes. In this case, there is no need to check if it exists because the developer should have full control over that in their layouts. Even in the instance of 3rd party extensions and themes, I think the case is still the same. – Nick Rolando Jun 27 '13 at 16:37
  • I am, in fact, developing a module. I need to use jQuery functionality and I don't want to break my own or other modules. So, I need to check if jQuery has already been included or not. I don't want to include multiple versions of jQuery (my own and another module's, for example). Then either server the CDN version or not :) Hope that's clear – Jongosi Jun 27 '13 at 16:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.