Question

I am developing a web app using the Joomla Framework. The jQuery UI accordion function is not working for me. The error reported by Firebug is that .accordion is not a function. I have read a lot of pages addressing various similar errors but have not found a solution.

Here is what I have in the template for my component’s view:

$document =& JFactory::getDocument();    
$document->addScript( '/includes/js/jquery-1.4.2.js' );  
$document->addScript( '/includes/js/jquery-ui-1.8.4.custom.min.js' );
JHTML::script( 'includes/js/pfm_main_ui.js', '' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>'    );

Here is my included javascript (pfm_main_ui.js):

jQuery(document).ready(function() {  
   jQuery('#accordion').accordion(  
        {  
            header: "h2"
        });  
      })

Here is the html for the accordion in the template:

 <div id="accordion">
 <div>
 <h2><a href="#">Header 1</a></h2>
 <div id="contentPanel_1">...content ...
 </div>
 </div>
 <div>
 <h2><a href="#">Header 2</a></h2>
 <div id="contentPanel_2">...content ...
 </div>
 </div>
 <div>
 <h2><a href="#">Header 3</a></h2>
 <div id="contentPanel_3">...content ...
 </div>
 </div>
 <div>
 <h2><a href="#">Header 4</a></h2>
 <div id="contentPanel_4">...content ...
 </div>
 </div>
 </div>

Other info:

Joomla by default uses mootools, so I have to call jQuery.noConflict() to use jQuery. I believe this may be where the error is coming from, but cannot solve. Any help is much appreciated!

Answer 1

A few thoughts:

1. What does the HTML look like with a quick view source? (Ctrl+U in FF and Chrome) Are the javascript files being loaded in the correct order?

2. The custom JQuery UI javascript file referenced by jquery-ui-1.8.4.custom.min.js may not contain the class declaration for the Accordion UI component. Try loading the full JQuery UI library from a CDN (here Microsoft’s: http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js) and see if that corrects the error.