Jquery and jquery-ujs conflict in phoenix

Phoenix Forum Questions / Help
1

Jquery and jquery-ujs and conflict and my method:delete links broken. if i delete import "jquery-ujs" or If i change jQuery: 'jquery' to jquery: 'jquery' everything works. I dont know how brunch works. Changing jQuery: 'jquery' to jquery: 'jquery' can cause a problem ? or Is there another solution

app.js

import “phoenix_html”
import “jquery-ujs”

Brunch-config.js

npm: {
enabled: true,
globals: {
$: ‘jquery’,
jQuery: ‘jquery’ }};

2

I use rails-ujs instead. It does not rely on jQuery at all.

You should be able to import that instead and everything should just work.

2 Likes
3

I get same error with rails-ujs too. What version phoenix-html, rails-ujs and jquery do u use ?

4

I don’t use jQuery at all. Both pehonix-html & rails-ujs are the latest available.

5

What the configuration is basically stating is:

  • assign the npm module jquery to the global variable $
  • assign the npm module jquery to the global variable jQuery

If i change jQuery: 'jquery' to jquery: 'jquery' everything works.

So either something doesn’t like what is assigned to jQuery by Brunch or something needs jQuery to be on the global variable jquery.

Changing jQuery: 'jquery' to jquery: 'jquery' can cause a problem?

  • jQuery: 'jquery' assigns the module to the global jQuery
  • jquery: 'jquery' assigns the module to the global jquery

And as in JavaScript variable names are case sensitive jQuery and jquery are different variables.

jquery-ujs seems to be Rails centric - maybe look into phoenix_ujs instead.

Another issue is that jQuery is now at 3.2.1 (2017-03-20) while jquery-ujs dates back to 1.8 (2012-08-09) - so jquery-ujs may not even work with more recent versions of jQuery.

3 Likes