New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jQuery.easing[jQuery.easing.def] is not a function #1466

Closed
ktmn opened this Issue Jun 2, 2015 · 15 comments

Comments

Projects
None yet
@ktmn

ktmn commented Jun 2, 2015

When I do

$(".dropdown-button").dropdown();

the dropdown opens fine, but when I click somewhere else and it's time for the dropdown to close it says

jQuery.easing[jQuery.easing.def] is not a function

I'm using these versions:

https://code.jquery.com/jquery-2.1.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js
@ktmn

This comment has been minimized.

Show comment
Hide comment
@ktmn

ktmn Jun 3, 2015

I described a workaround in #1472

ktmn commented Jun 3, 2015

I described a workaround in #1472

@ktmn ktmn closed this Jun 3, 2015

@derekdowling

This comment has been minimized.

Show comment
Hide comment
@derekdowling

derekdowling Oct 27, 2015

I'm seeing this same issue but with: $("select").material_select();

derekdowling commented Oct 27, 2015

I'm seeing this same issue but with: $("select").material_select();

@tomicakorac

This comment has been minimized.

Show comment
Hide comment
@tomicakorac

tomicakorac Nov 1, 2015

@derekdowling same problem here, Materialize 0.97.1. Were you able to fix it?

@ktmn can you please explain your workaround? I don't think I understand it, sorry.

tomicakorac commented Nov 1, 2015

@derekdowling same problem here, Materialize 0.97.1. Were you able to fix it?

@ktmn can you please explain your workaround? I don't think I understand it, sorry.

@ktmn

This comment has been minimized.

Show comment
Hide comment
@ktmn

ktmn Nov 3, 2015

@tomicakorac Install hammerjs and pickadate with npm, import with webpack or similar.

ktmn commented Nov 3, 2015

@tomicakorac Install hammerjs and pickadate with npm, import with webpack or similar.

@derekdowling

This comment has been minimized.

Show comment
Hide comment
@derekdowling

derekdowling Nov 3, 2015

For now I reverted to using browser-default which seems to work fine but isn't quite as nice looking. Also on 0.97.1

derekdowling commented Nov 3, 2015

For now I reverted to using browser-default which seems to work fine but isn't quite as nice looking. Also on 0.97.1

@derekdowling

This comment has been minimized.

Show comment
Hide comment
@derekdowling

derekdowling Jan 21, 2016

Still not working as of 0.97.5 despite trying to do @ktmn's "fix". Perhaps it has to do with using the sass version?

derekdowling commented Jan 21, 2016

Still not working as of 0.97.5 despite trying to do @ktmn's "fix". Perhaps it has to do with using the sass version?

@m-gv

This comment has been minimized.

Show comment
Hide comment
@m-gv

m-gv Mar 15, 2016

Still experiencing issues with this on v0.97.5 as well. Any options?

m-gv commented Mar 15, 2016

Still experiencing issues with this on v0.97.5 as well. Any options?

@m-gv

This comment has been minimized.

Show comment
Hide comment
@m-gv

m-gv Mar 16, 2016

It turned out one of the dependencies in my project was using 2.1.3. This version of JQuery no longer seems to set JQuery.easing.def to easeOutQuad by default, thus there will be an undefined error.

I solved this by forcing materialize to use JQuery 2.1.1 in the following way:

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript"> 
     $materialize = jQuery.noConflict(true); 
</script> 

Inside materialize.js:

if (typeof(jQuery) === 'undefined') {
  var jQuery;
  // Check if require is a defined function.
  if (typeof(require) === 'function') {
    jQuery = $materialize = require('jQuery');
  // Else use the dollar sign alias.
  } else {
    jQuery = $materialize;
  }
};

However now it is no longer possible to use the CDN version and to update without making changes to the materialize file. People working on the project after me will likely run into issues with the way I am currently solving it.

It would be great to get an official statement from @Dogfalo on how you should use materialize while you you have external modules which are using other versions of JQuery. (I don't have access to those extrernal modules)

EDIT: This did not actually end up solving the issue for me, since the external dependency also loads JQuery using Java. When this happened, JQuery was again being replaced with the newer version 2.1.3: thus also the word JQuery inside Materialize gets replaced by version 2.1.3, instead of staying 2.1.1.

The context gets lost and JQuery.easing.def becomes undefined. I was able to solve this by putting the whole easing plugin inside of the following tags:

(function($, undefined) {
<easing plugin here>
}) (jQuery);

and replacing the word JQuery with $ in the easing plugin code.

(as suggested here: https://stackoverflow.com/questions/11533168/jquery-easingjquery-easing-def-is-not-a-function)

Would be great to see how this could be standardized though, so that me and others can keep using the standard version of materialize.

m-gv commented Mar 16, 2016

It turned out one of the dependencies in my project was using 2.1.3. This version of JQuery no longer seems to set JQuery.easing.def to easeOutQuad by default, thus there will be an undefined error.

I solved this by forcing materialize to use JQuery 2.1.1 in the following way:

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript"> 
     $materialize = jQuery.noConflict(true); 
</script> 

Inside materialize.js:

if (typeof(jQuery) === 'undefined') {
  var jQuery;
  // Check if require is a defined function.
  if (typeof(require) === 'function') {
    jQuery = $materialize = require('jQuery');
  // Else use the dollar sign alias.
  } else {
    jQuery = $materialize;
  }
};

However now it is no longer possible to use the CDN version and to update without making changes to the materialize file. People working on the project after me will likely run into issues with the way I am currently solving it.

It would be great to get an official statement from @Dogfalo on how you should use materialize while you you have external modules which are using other versions of JQuery. (I don't have access to those extrernal modules)

EDIT: This did not actually end up solving the issue for me, since the external dependency also loads JQuery using Java. When this happened, JQuery was again being replaced with the newer version 2.1.3: thus also the word JQuery inside Materialize gets replaced by version 2.1.3, instead of staying 2.1.1.

The context gets lost and JQuery.easing.def becomes undefined. I was able to solve this by putting the whole easing plugin inside of the following tags:

(function($, undefined) {
<easing plugin here>
}) (jQuery);

and replacing the word JQuery with $ in the easing plugin code.

(as suggested here: https://stackoverflow.com/questions/11533168/jquery-easingjquery-easing-def-is-not-a-function)

Would be great to see how this could be standardized though, so that me and others can keep using the standard version of materialize.

@Kail0

This comment has been minimized.

Show comment
Hide comment
@Kail0

Kail0 Apr 29, 2016

Above solution from @m-gv works great..

Kail0 commented Apr 29, 2016

Above solution from @m-gv works great..

@abdou-ghonim

This comment has been minimized.

Show comment
Hide comment
@abdou-ghonim

abdou-ghonim Nov 1, 2016

@m-gv works for me too 👍

abdou-ghonim commented Nov 1, 2016

@m-gv works for me too 👍

@csalexwilliams

This comment has been minimized.

Show comment
Hide comment
@csalexwilliams

csalexwilliams Jan 30, 2017

@m-gv Great solution. Thanks!

csalexwilliams commented Jan 30, 2017

@m-gv Great solution. Thanks!

@Aewil

This comment has been minimized.

Show comment
Hide comment
@Aewil

Aewil Feb 28, 2017

Hello guys,

I've the same issue but i don't have the easing plugin, do you know how to solve it ?

Thank you ;)

Aewil commented Feb 28, 2017

Hello guys,

I've the same issue but i don't have the easing plugin, do you know how to solve it ?

Thank you ;)

@kmmbvnr

This comment has been minimized.

Show comment
Hide comment
@kmmbvnr

kmmbvnr Jul 10, 2017

Contributor

I've got the same error when upgrading to 0.99, b/c in my custom build of Materialize, I didn't update jquery.easing version

"js/jquery.easing.1.4.js",

-          "js/jquery.easing.1.3.js",
+          "js/jquery.easing.1.4.js",
Contributor

kmmbvnr commented Jul 10, 2017

I've got the same error when upgrading to 0.99, b/c in my custom build of Materialize, I didn't update jquery.easing version

"js/jquery.easing.1.4.js",

-          "js/jquery.easing.1.3.js",
+          "js/jquery.easing.1.4.js",
@tomscholz

This comment has been minimized.

Show comment
Hide comment
@tomscholz

tomscholz Jul 10, 2017

Contributor

@kmmbvnr I created a full changelog here

Contributor

tomscholz commented Jul 10, 2017

@kmmbvnr I created a full changelog here

@angrykoala

This comment has been minimized.

Show comment
Hide comment
@angrykoala

angrykoala Jul 20, 2017

This is happening to me with materialize-css@0.100.0 and 0.99.0 (it wasn't happening before)

Adding jqueryUI <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> seems to fix the problem, however I don't understand why or if there is a better fix.

I'm using materialize as part of an electron app, and I prefer to use only npm based packages

angrykoala commented Jul 20, 2017

This is happening to me with materialize-css@0.100.0 and 0.99.0 (it wasn't happening before)

Adding jqueryUI <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> seems to fix the problem, however I don't understand why or if there is a better fix.

I'm using materialize as part of an electron app, and I prefer to use only npm based packages

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment