Was trying to set up a very basic image field slider using the flexslider field formatter option with default settings and was getting this error thrown in console and a blank flexslider.

TypeError: $(...).once is not a function
$('#' + id, context).once('flexslider', function() {

It turned out it was because I had "scripts[] = js/jquery-1.7.1.min.js" in my theme info. Perhaps it would be a nice feature to pop a warning in settings page or in replacement of the slider or mention it in the documentation the version of jquery supported. It took me way longer than it should have to figure out why this was happening.

Comments

philben’s picture

philben commented

I've been having the same issue - I've changed jQuery version from 1.7.2 to 2.0.0, nothing worked for me. So, 7wonders, how did you resolve your issue, which jQuery version worked for you? Some answers 'll be appreciated. Thanks.

rutcreate’s picture

rutcreate commented

In my case, there are 2 jquery files (core, theme). I removed it from theme. it works perfectly fine.

katrien_w’s picture

katrien_w commented
Issue summary: View changes

Thanks, this solution works fine for me!

sgdev’s picture

sgdev commented
Version: 7.x-2.0-alpha1 » 7.x-2.x-dev

This is actually a bigger issue than just moving jQuery files.

We have a client using Formstack to embed forms into pages. Included in the Formstack code is a document.write to http://static.formstack.com/forms/js/3/jquery.min_1d14cd3798.js, which loads another jQuery file.

The result is the "TypeError: $(...).once is not a function" error for Flex Slider, and the slideshow does not load.

There needs to be some logic in Flex Slider to identify if another jQuery has been loaded, and skip the process if there has been.

sgdev’s picture

sgdev commented

One additional comment on this topic. Some third-party tools provide options to remove jQuery from being embedded in the JavaScript during the time it is created. For other tools, there might be an option to use iframes instead. Both of these are viable approaches that would fix the problem.

Regarding a solution that would block jQuery from loading, the more I think about it, the more I feel it is not that straightforward. What if the third-party app needs a particular version of jQuery to run? What if the Drupal site is dependent on a particular version?

Is there possibly a solution in Drupal core than handles this issue, such as wrapping third-party embeds in a way that does not interfere with loading site content?

lukejoliat’s picture

lukejoliat commented

I'm getting this same error, but I cannot figure out how to resolve it from the comments here. Do I have duplicate jquery files? What exactly do I need to do to stop the error?

LucasLLLS’s picture

LucasLLLS commented

I was having a similar issua, then i have changed my jQuery version from 1.10 to 1.8 and it solved the problem.

amaria’s picture

amaria commented
Status: Active » Postponed (maintainer needs more info)

Is this still happening? Be sure to use the latest version of the FlexSlider library. There were some issues with older versions of the library with newer versions of jQuery.

amaria’s picture

amaria commented
Status: Postponed (maintainer needs more info) » Closed (outdated)
ferrete’s picture

ferrete commented

I had the same problem, check if jQuery is called more than 1 time and make sure that you start the script with jQuery(function($) {

hardik jayeshbhai hihoriya’s picture

hardik jayeshbhai hihoriya commented

In my case, there are 2 jquery files (core, theme). I removed it from theme. it works perfectly fine.

it's working complete #2
thank you

shobhit_juyal’s picture

shobhit_juyal commented

#11, worked for me. Thanks

gabble_ratchet’s picture

gabble_ratchet commented

Just to add my experience to this thread - I was getting the exact same error on a fresh load after clearing the cache. In my case it turned out to be Font Awesome that was causing the issue. I was using the svg/js option which caused the aforementioned issue. I removed that and instead included the css via cdn and the issue has gone away.

derekrezek’s picture

derekrezek commented

in my case i removed it from the core,
in core.libraries.yml > jquery.ui

jquery.ui:
  remote: https://github.com/jquery/jquery-ui
  version: &jquery_ui_version 1.12.1
  license: &jquery_ui_license
    name: Public Domain
    url: https://github.com/jquery/jquery-ui/blob/1.12.1/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery.ui/ui/data-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/disable-selection-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/form-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/labels-min.js: { weight: -11, minified: true }
#    assets/vendor/jquery.ui/ui/jquery-1-7-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/scroll-parent-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/tabbable-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/unique-id-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/version-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/focusable-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/ie-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/keycode-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/plugin-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/safe-active-element-min.js: { weight: -11, minified: true }
    assets/vendor/jquery.ui/ui/safe-blur-min.js: { weight: -11, minified: true }
  css:
    component:
      assets/vendor/jquery.ui/themes/base/core.css: {}
    theme:
      assets/vendor/jquery.ui/themes/base/theme.css: {}
  dependencies:
    - core/jquery
wdev’s picture

wdev commented

#11, worked for me. Cool
Thanks