Accordion preview works, front end does not. $(displaySelector + ":not(.ui-accordion)").accordion is not a function error

I'm experiencing this issue as well. Running D7.

I have this error on ajax request fired from a page that includes a view accordion.

To fix this issue, i added if($.isFunction($(displaySelector +':not(.ui-accordion)').accordion)) before jQuery UI accordion call.

This is very strange, the error is basicaly saying that jquery.ui.accordion is not loaded, which is very weird.

@Raphael Apard:

+++ b/views-accordion.js
@@ -37,7 +37,8 @@ Drupal.behaviors.views_accordion =  {
-          $(displaySelector +':not(.ui-accordion)').accordion({
+          if($.isFunction($(displaySelector +':not(.ui-accordion)').accordion)) {

This would prevent the accordion from executing thus not displaying the accordion if the plugin hasnt loaded for some reason.

In order words, this only lets it fail silently.

I'm having a hard time duplicating this problem, any pointers?

Based on #4.

i experience the same result but can see no js error. strange.

I am having the same issue on D7. The accordion view works within the view preview but not on the page itself for the view. I have tried uninstalling and reinstalling with no solution. I've cleared all cache and nothing. I get the same message when I view the error from Firebug via FireFox:

Timestamp: 2/10/2014 10:47:12 AM
Error: TypeError: $(...).accordion is not a function
Source File: /sites/all/modules/contrib/views_accordion/views-accordion.js?n0sk1m
Line: 49

Line:49 is clearstyle: this.clearstyle

Drupal.behaviors.views_accordion = {
attach: function(context) {
if(Drupal.settings.views_accordion){
(function ($) {
$.each(Drupal.settings.views_accordion, function(id) {
/* Our view settings */
var usegroupheader = this.usegroupheader;
var viewname = this.viewname;
var display = this.display;

/* the selectors we have to play with */
var displaySelector = '.view-id-'+ viewname +'.view-display-id-'+ display +' .view-content';
var headerSelector = this.header;

/* Prepare our markup for jquery ui accordion */
$(displaySelector +' '+ headerSelector +':not(.ui-accordion-header)').each(function(i){
var hash = "#"+ viewname +"-"+ display +"-"+ i; // hash to use for accordion navigation option
var $this = $(this);
var $link = $this.find('a');
// if the header is not already using an anchor tag, add one
if($link.length == 0){
// setup anchor tag for navigation
$this.wrapInner('');
}
// if there are already, they wont be clickable with js enabled, we'll use them for accordion navigation
else{
// @FIXME ?
// We are currently destroying the original link, though search crawlers will stil see it.
// Links in accordions are NOT clickable and leaving them would kill deep linking.
$link.get(0).href = hash;
}

// Wrap the accordion content within a div if necessary
if (!usegroupheader) {
$this.siblings().wrapAll('

');
}
});

/* jQuery UI accordion call */
$(displaySelector +':not(.ui-accordion)').accordion({
header: headerSelector,
animated: this.animated,
active: this.rowstartopen,
collapsible: this.collapsible,
autoHeight: this.autoheight,
event: this.event,
fillSpace: this.fillspace,
navigation: this.navigation,
clearstyle: this.clearstyle
});
});
})(jQuery);
}
}
};

Here is the page with view (if needed) that displays everything instead of accordion view http://dev.suicidepreventionmessaging.actionallianceforsuicideprevention...

Any assistance would be greatly appreciated. Thank you KS

I faced this issue, i tried to find the solution adding patch and all, it didn't work. After thinking lot, I realize that is there resin for js library clash...? then i used the concept of jQuery.noConflict(), in my custom js code and removed all js library files, then it start working.

There is nothing problem in the module. It work fine for js version 1.7

I have problem in finding where the conflict occur. can anyone help?

I m using the mentor theme which has a jquery.js file.

how can i find which files are conflicting?

Still an issue for some themes, posting in case it will help anyone.

@santoshnath07

In most cases this is due to conflicts with other jQuery scripts being used by the themes, or in some cases other modules. To troubleshoot:

1. Use web developer toolbar browser extension (Use Firefox or Chrome for this)
2. Navigate to page where accordion is placed
3. Information > View Javascript - this shows a list of all JS installed and location used on the site and page
4. Try temporarily renaming JS files until you identify which one/s are conflicting with accordion JS
5. Address issue as needed (updating versions, safely disabling unnecessary ones, etc.)

Hope this helps!

This was raised against a now old release, closing it as outdated. Feel free to reopen if it you see it happening on the latest release, and follow @jaesperanza's steps