ZF-6321: JQuery Accordion is not working

Issue Type: Bug Created: 2009-04-16T08:48:20.000+0000 Last Updated: 2009-06-24T12:03:09.000+0000 Status: Resolved Fix version(s): - 1.8.4 (23/Jun/09)

Reporter: Thorsten Ruf (saphir2k) Assignee: Benjamin Eberlei (beberlei) Tags: - ZendX_JQuery

Related issues: Attachments:


I downloaded the latest JQuery (1.3.2) and JQuery UI ( 1.7.1) and tried with the View Helper included in ZF 1.7.8.

The Accordion is not working "out of the box". The structure, the AccordionContainer writes, is wrong.

1.7.8 writes this structure to the document:

<pre class="highlight">





I changed the structure to:

<pre class="highlight">

``### <a>Title</a>




And the accordion worked well.


Posted by Pedro Simões (simoesp) on 2009-04-16T15:32:18.000+0000

hello i have the same problem and the

Sample Input

<pre class="highlight">

<?= $this->accordionContainer()
    ->addPane("accord1", "Accord 1", "sample text 1")
    ->addPane("accord1", "Accord 2", "sample text 2")
    ->addPane("accord1", "Accord 3", "sample text 3")
    ->accordionContainer("accord1", array(), array("class" => "lightness")); ?>

Sample Output

<pre class="highlight">
ofollow" href="">">"> 

<a class="ui-accordion-header" href="#">Accord 1</a>``sample text 1

<a class="ui-accordion-header" href="#">Accord 2</a>

sample text 2

<a class="ui-accordion-header" href="#">Accord 3</a>

sample text 3


it's missing the $("#accord1").accordion({});

on the $(document).ready(function()

Posted by Thorsten Ruf (saphir2k) on 2009-04-17T00:38:05.000+0000


you adressed another problem, but i think you don't echo the jQuery Object in your header.

Look at this example:

<pre class="highlight">
    <?= $this->jQuery()
             ->setLocalPath('/script/jquery/jquery-1.3.2.min.js'); ?>

If you do, check your render mode. It's better to not set it in your case, so the object writes all necessary data to the document. Check the documentation " Refactoring jQuery environment with setRenderMode()"


Posted by Jay M. Keith (jmkeith) on 2009-04-20T13:25:50.000+0000

It would be especially nice if there was a way to set the protected $_elementHtmlTemplate variable. Or as mentioned above, have the correct HTML. The example that the original poster displayed is incorrect HTML (note the use of unordered lists with no list item tags after).

<pre class="literal">





The example provided in the documentation (and example.html files) is below:

<pre class="literal">


First Content


Second Content

Posted by Thorsten Ruf (saphir2k) on 2009-04-20T14:12:03.000+0000

Sorry for invalid xhtml. Here are the correction:

<pre class="highlight">





I find it not usefull to change the used html template for the accordion element. Instead it should simple create correct markup. If you need an element with changed markup, extend the element and overwrite $_elementHtmlTemplate. For this reason benjamin used protected and not private declaration for this variable.

Thorsten Ruf

Posted by Jay M. Keith (jmkeith) on 2009-04-20T17:58:30.000+0000

In my current practice I have simply extended the element. However, upon seeing this bug report, I felt the current examples that jQuery UI uses (like the example you provided), would be more appropriate than the current template that is set for this, and other UI components.

Posted by Pedro Simões (simoesp) on 2009-04-21T04:23:45.000+0000

after changing the $_elementHtmlTemplate variable in the helper it started to work



Posted by Benjamin Eberlei (beberlei) on 2009-04-22T20:59:41.000+0000

I'll look into it, but i have to check if your proposed accordion structures work with UI 1.5 as well, so that the helper works on both.

Posted by Benjamin Eberlei (beberlei) on 2009-04-22T21:00:32.000+0000

Changed priority to minor, because overriding is possible

Posted by Thorsten Ruf (saphir2k) on 2009-04-23T00:19:48.000+0000

Hi Benjamin,

i'm sorry, but i really can't understand the priority change. If you leave the code as it is at the moment, a beginner have to extend the Element and overwrite the template variable. I appreciate your work a lot, but if you take a look at the documentation only one or two elements are working "out of the box" with the actual version of jQuery. I spent a lot of time to fix some elements, because i need the latest versions.

At the moment you can download UI as follwoing: "Current (stable) (1.7.1: jQuery 1.3+)" or
"Legacy (1.6: jQuery 1.2.6)".

Posted by Dolf Schimmel (Freeaqingme) (freak) on 2009-05-04T17:29:27.000+0000

Setting priority to critical. As the functionality clearly does not work (AT ALL!), and the functionality is therebye rendered useless.

Posted by Ludwig Ruderstaller (rufinus) on 2009-06-06T08:54:05.000+0000


@pedro: i run in the same issue, i just added the Jquery accordion call myself with jQuery()->addJavascript('$("#navigation").accordion({})'); ?> than i noticed that if i call addJavaScript the code is printed. it looks like: ``

so i ended up with calling addJavascript() with an empty string.

Posted by Benjamin Eberlei (beberlei) on 2009-06-11T01:56:22.000+0000

Fixed in trunk and merged back into 1.8 release branch.

The use of ``` now switches 1.5 vs 1.7 behaviour.

Posted by Marc Grotholtmann (mng) on 2009-06-24T12:02:55.000+0000

It still doesn't work in ZF 1.8.4 which i downloaded today!


<pre class="literal">
$view = Zend_Layout::getMvcInstance()->getView();
$view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper'); 
    ->setUiVersion  ('1.7.2')
    ->addStylesheet ('/styles/custom-theme/jquery-ui-1.7.2.custom.css')
    ->setLocalPath  ('/scripts/jquery-1.3.2.min.js')


<pre class="literal">
$a = new ZendX_JQuery_View_Helper_AccordionContainer();
$a->addPane("a", "a1", "blabla", array());
$a->addPane("a", "a2", "blabla", array());
$a->addPane("a", "a3", "blabla", array());
$this->view->assign("tabs", $a->accordionContainer("a", array(), array()));


<pre class="literal">





h3> around the ist still missing, should be:

<pre class="literal">







You have to change Line 146 in AccordionContainer.php (/extras/library/ZendX/JQuery/View/Helper) from

<pre class="literal">
$this->_elementHtmlTemplate = '<a href="#">%s</a>


'; to

<pre class="literal">
$this->_elementHtmlTemplate = '




Have you found an issue?

See the Overview section for more details.


© 2006-2016 by Zend, a Rogue Wave Company. Made with by awesome contributors.

This website is built using zend-expressive and it runs on PHP 7.