Uncaught TypeError: undefined is not a function when using a jQuery plugin in Magento [closed]

Question

I am working on a Magento Extension. Magento has a known issue when you try to use jQuery in Magento because Magento uses the Prototype library.

The work around for it is to put your jQuery code in no conflict mode like this...

jQuery.noConflict();

Once I did this, it resolved 90% of my problems i was having with JavaScript errors. However I still have 3 major problems with JavaScript right now and I believe they are related...

Uncaught TypeError: undefined is not a function

http://www.codedevelopr.com/screenshots/2014/2014-08-23_16-14-37.png

When I view the line numbers that it is reporting these errors from I see this...

Line 1168 jQuery(".acc-wizard").accwizard({ now this accwizard() is a function that is loaded from a jQuery plugin file. I have verified the file is loaded and it is loaded after my jQuery and after I set the no conflict mode for jQuery. I am not sure if something in the plugin file needs to be changed as well to work with the no conflict mode or why it is saying it is undefine?

Same situation with simplecolorpicker() on line 1180.

I have uploaded the file that holds the accwizard() jQuery Plugin, it is about 14kb in size and can be found here http://www.codedevelopr.com/screenshots/2014/acc-wizard-bs-3.js I figured it is a little to large to post that code here.

Can anyone help me to get these errors resolved? It seems any jQuery plugin I try to use results in this undefined error above?

---

UPDATE

So I have been experimenting with a lot of things with no luck...that is until I tried loading all my JS files inline in my actual template page that my extension uses...once I do that, it all works with none of these errors.

This is frustrating though as I much prefer to have separate JS file for my JS...instead of loading 3 JS files I even tried putting all 3 into 1 file and loading that 1 file but I still get the JS errors...now when I copy that 1 file that had all 3 files combined and put it directly in the template file...everything works perfectly! This makes no sense to me, please help?

Answer 1

you may need to use a closure

;(function($){
    // your code
})(jQuery);

Move your code inside the closure and use $ instead of jQuery

Answer 2

You may need to change the variable used in your plugins. Try setting this at the top of both .js files:

var $j = jQuery.noConflict();

Then within each plugin you can replace the $ variable with $j. I have had to do this with particularly troublesome plugins within Magento.

Answer 3

Are you including these libraries at the top of your document or at the bottom? It may be that the plugins aren't loaded at the time your script is running.

What happens when you enter this in the console:

jQuery.fn.accwizard

Answer 4

hello i have faced this error ago while using datepicker i faced this error . the main reason behind this error is using of multiple versions of jquery that's it does not able to decide which version to use as two version will be available so as we use '$' sign as default for jquery it does not recognize which jquery version it should use for default jquery symbol that's why it says '$' is undefined and function refers to '$' or jquery function in this error

you can get a detailed explanation and solution to error here