Question

56

jQuery and AngularJS not working together

rated 0 times [ 63] [ 7] / answers: 1 / hits: 45242 / 12 Years ago, wed, september 19, 2012, 12:00:00

I am using RequireJS and Angular but they are not working together in my set up. Things work fine when jQuery version is 1.7.2. However I wanted to use jQuery 1.8.1 and jQuery UI and angular app even fails to initialize the my main module with this.

Here is the problem:

Case sensitive variables: jQuery and jquery. In jquery 1.8.1 source code, towards the end they have defined window.jQuery. Where as in earlier version 1.7.2 had window.jquery defined.

Since I want to use jQuery UI in my app included the file jquery-ui-1.8.23.custom.min.js. After including it I got the error that jQuery is undefined.

So, I decided to upgrade my jQuery version and downloaded the said 1.8.1 version. Towards the end of the jQuery source code I could see that this version defined window.jQuery (correct case as needed by jQuery UI).

I updated my require-jquery JS with latest version from James Burke github project and updated it with jquery 1.8.1.

But including the updated jQuery/RequireJS project, angularjs has stopped working.

I get this error in Chrome console:

Console

If I revert to 1.7.2 angular works. Or if I edit jQuery file to define window.jquery instead of window.jQuery (note the case) it again works. But that means jQuery UI won't.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marisela

Add To Favorites

Follow

Total Points: 103

Total Questions: 105

Total Answers: 102

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

marisela questions

1 Access to XMLHttpRequest at '…' from origin 'localhost:3000' has been blocked by CORS policy

Wed, Aug 25, 21, 00:00, 3 Years ago

1 How to escape double and single quotes in a JSON array

Wed, Oct 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'contentWindow' of undefined

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

Sun, Aug 2, 20, 00:00, 4 Years ago

1 Validation using Yup to check number length

Tue, Nov 19, 19, 00:00, 5 Years ago

View All

answered 12 Years ago gabriel · Accepted Answer

I fixed this solution by removing the line from jQuery source which made $ and jQuery the global variables. This line looks something like window.jQuery = window.$ = jQuery.

If you are also using AngularJS with RequireJS and are facing similar problem, remove these lines.

Furthermore, you will have to use jqueryui-amd in your project. Download the utility from the Github page and it will convert jQuery UI script to AMD modules.

Using the AngularJS feature called 'directives' to extend HTML elements I was able to use jQuery UI components in reusable and sane manner.

I've to say that I've hated and loved AngularJS while working on my project, sometimes even letting everybody on Twitter know that I hate AngularJS. However, after having implemented and finished two projects over the last month I have fairly good idea on when to use it and when not to use it.

Here is one jsFiddle I've created to demonstrate the use of jQuery UI with AngularJS:

http://jsfiddle.net/samunplugged/gMyfE/2/