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.

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

1 Answer 1

Reset to default
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
13
  • Or, if you want Google CDN jQuery with local fallback: magento.stackexchange.com/questions/3523/…
    – philwinkle
    Commented Jun 27, 2013 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
    Commented Jun 27, 2013 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
    Commented Jun 27, 2013 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
    Commented Jun 27, 2013 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
    Commented Jun 27, 2013 at 16:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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