Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment #1
Philben CreditAttribution: Philben commentedI'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.
Comment #2
rutcreate CreditAttribution: rutcreate commentedIn my case, there are 2 jquery files (core, theme). I removed it from theme. it works perfectly fine.
Comment #3
katrien_w CreditAttribution: katrien_w commentedThanks, this solution works fine for me!
Comment #4
ron_s CreditAttribution: ron_s commentedThis 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.
Comment #5
ron_s CreditAttribution: ron_s commentedOne 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?
Comment #6
lukejoliat CreditAttribution: lukejoliat commentedI'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?
Comment #7
LucasLLLS CreditAttribution: LucasLLLS as a volunteer commentedI was having a similar issua, then i have changed my jQuery version from 1.10 to 1.8 and it solved the problem.
Comment #8
amaria CreditAttribution: amaria commentedIs 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.
Comment #9
amaria CreditAttribution: amaria commentedComment #10
ferrete CreditAttribution: ferrete commentedI had the same problem, check if jQuery is called more than 1 time and make sure that you start the script with jQuery(function($) {
Comment #11
hardik jayeshbhai hihoriya CreditAttribution: hardik jayeshbhai hihoriya as a volunteer and commentedIn 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
Comment #12
shobhit_juyal CreditAttribution: shobhit_juyal commented#11, worked for me. Thanks
Comment #13
gabble_ratchet CreditAttribution: gabble_ratchet commentedJust 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.
Comment #14
derekrezek CreditAttribution: derekrezek commentedin my case i removed it from the core,
in core.libraries.yml > jquery.ui
Comment #15
wdev CreditAttribution: wdev commented#11, worked for me. Cool
Thanks