Issues

ZF-6321: JQuery Accordion is not working

Description

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:


Title
CONTENT
Title
CONTENT

I changed the structure to:


Title

CONTENT

Title

CONTENT

And the accordion worked well.

Comments

hello i have the same problem and the

Sample Input


<?= $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


ofollow" href="www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
www.w3.org/1999/xhtml"> 
  
  
Accord 1
sample text 1
Accord 2
sample text 2
Accord 3
sample text 3
...

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

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

Pedro,

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

Look at this example:


    <?= $this->jQuery()
             ->addStylesheet('/script/jquery/themes/smoothness/jquery-ui-1.7.1.custom.css')
             ->setUiLocalPath('/script/jquery/jquery-ui-1.7.1.custom.min.js')
             ->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 "63.2.1.4. Refactoring jQuery environment with setRenderMode()"

Thorsten

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).

Title

CONTENT

Title

CONTENT

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

First

First Content

Second

Second Content

Sorry for invalid xhtml. Here are the correction:


Title

CONTENT

Title

CONTENT

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

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.

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

thnx

;-)

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.

Changed priority to minor, because overriding is possible

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)".

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

Hi,

@pedro: i run in the same issue, i just added the Jquery accordion call myself with <?= $this->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.

Fixed in trunk and merged back into 1.8 release branch.

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

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

BOOTSTRAP:

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

CONTROLLER:

$a = new ZendX_JQuery_View_Helper_AccordionContainer();
$a->setView($this->view);
$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()));

OUTPUT:

a1
blabla
a2
blabla
a3
blabla

{{

<

h3>}} around the {{}} ist still missing, should be:

a1

blabla

a2

blabla

a3

blabla

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

$this->_elementHtmlTemplate = '%s
%s
';

to

$this->_elementHtmlTemplate = '

%s

%s
';