jQuery and AngularJS not working together

Question

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 Output

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.

Have you tried including jQuery and then saying, "window.jquery = jQuery;"? Then both jquery and jQuery would be defined (aliased to the same thing) and both packages should be happy. — Ed Bayiates
– Ed Bayiates, Commented Sep 19, 2012 at 15:19
Yes, I have tried it. With both version AngularJS complains that module name 'manager' not found. I think my issue is more to do with RequireJS than with AngularJS. My project used RequireJS so I want to know if somebody out there has tried to include jQuery UI and Angular on a RequireJS project. — S Gupta
– S Gupta, Commented Sep 19, 2012 at 15:50

Nir Alfasi · Accepted Answer · 2014-02-09 01:40:05Z

16

Using jQuery's noConflict method is a more elegant and future proof solution to this problem.

View extensive documentation on http://api.jquery.com/jQuery.noConflict/

UPDATE (example from the link):

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>

edited Feb 9, 2014 at 1:40

Nir Alfasi

53.6k11 gold badges94 silver badges138 bronze badges

answered Mar 22, 2013 at 7:35

Ayame__

1,0002 gold badges9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jimbo Over a year ago

This would be a better answer if you placed a code example from the documentation directly into the answer, instead of users having to go and visit the link to find the information they need :)

Jawa · Accepted Answer · 2013-01-16 13:53:00Z

3

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/

edited Jan 16, 2013 at 13:53

Jawa

2,3326 gold badges34 silver badges39 bronze badges

answered Sep 22, 2012 at 20:33

S Gupta

1,5872 gold badges14 silver badges20 bronze badges

1 Comment

Robert Ngetich Over a year ago

I don't think this should be the accepted answer. You shouldn't need to edit jQuery source. It's not good practise. For one, it creates unnecessary maintenance overhead when you (or someone after you) will eventually need to upgrade jquery.

Deepak · Accepted Answer · 2017-01-31 11:55:51Z

1

Easily fixed this after my two days try..

When try

Include the particular Slider Jquery files to the view.html directly. remove jquery from index.html file

answered Jan 31, 2017 at 11:55

Deepak

5917 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery and AngularJS not working together

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related