Zend Framework

JQuery Accordion is not working

Details

  • Type: Bug Bug
  • Status: Resolved Resolved
  • Priority: Critical Critical
  • Resolution: Fixed
  • Affects Version/s: 1.7.8
  • Fix Version/s: 1.8.4
  • Component/s: ZendX_JQuery
  • Labels:
    None

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:

<ul>
  <li>
     <a>Title</a>
     <div>CONTENT</div>
   </li>
  <li>
     <a>Title</a>
     <div>CONTENT</div>
   </li>
</ul>

I changed the structure to:

<ul>
    <h3><a>Title</a></h3>
     <div>CONTENT</div>
    <h3><a>Title</a></h3>
     <div>CONTENT</div>
</ul>

And the accordion worked well.

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
Pedro Simões added a comment -

hello i have the same problem and the

Sample Input

<div id="barra-lateral1">
<?= $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")); ?>
</div>

Sample Output

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title>              
  
  <link rel="stylesheet" href="/ZendCMS/admin/js/css/ui-lightness/jquery-ui-1.7.1.custom.css" type="text/css" media="screen" />

<script type="text/javascript" src="/ZendCMS/admin/js/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/ZendCMS/admin/js/js/jquery-ui-1.7.1.custom.min.js"></script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $("#Login").dialog({"title":"Log in"});
});
//]]>

</script></head> 
<body>
<div id="cabecalho">

</div>
<div id="barra-lateral1">
<ul class="lightness" id="accord1">
<li class="ui-accordion-group"><a href="#" class="ui-accordion-header">Accord 1</a><div class="ui-accordion-content">sample text 1</div></li>
<li class="ui-accordion-group"><a href="#" class="ui-accordion-header">Accord 2</a><div class="ui-accordion-content">sample text 2</div></li>
<li class="ui-accordion-group"><a href="#" class="ui-accordion-header">Accord 3</a><div class="ui-accordion-content">sample text 3</div></li>
</ul>
</div>
...

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

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

Show
Pedro Simões added a comment - hello i have the same problem and the Sample Input 
<div id="barra-lateral1">
<?= $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")); ?>
</div>
Sample Output 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title>              
  
  <link rel="stylesheet" href="/ZendCMS/admin/js/css/ui-lightness/jquery-ui-1.7.1.custom.css" type="text/css" media="screen" />

<script type="text/javascript" src="/ZendCMS/admin/js/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/ZendCMS/admin/js/js/jquery-ui-1.7.1.custom.min.js"></script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $("#Login").dialog({"title":"Log in"});
});
//]]>

</script></head> 
<body>
<div id="cabecalho">

</div>
<div id="barra-lateral1">
<ul class="lightness" id="accord1">
<li class="ui-accordion-group"><a href="#" class="ui-accordion-header">Accord 1</a><div class="ui-accordion-content">sample text 1</div></li>
<li class="ui-accordion-group"><a href="#" class="ui-accordion-header">Accord 2</a><div class="ui-accordion-content">sample text 2</div></li>
<li class="ui-accordion-group"><a href="#" class="ui-accordion-header">Accord 3</a><div class="ui-accordion-content">sample text 3</div></li>
</ul>
</div>
...
it's missing the $("#accord1").accordion({}); on the $(document).ready(function()
Hide
Permalink
Thorsten Ruf added a comment - - edited

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

Show
Thorsten Ruf added a comment - - edited 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
Hide
Permalink
Jay M. Keith added a comment -

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

<ul>
    <h3><a>Title</a></h3>
     <div>CONTENT</div>
    <h3><a>Title</a></h3>
     <div>CONTENT</div>
</ul>

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

<div id="accordion">
  <div>
    <h3><a href="#">First</a></h3>
    <div>First Content</div>
  </div>
 <div>
    <h3><a href="#">Second</a></h3>
    <div>Second Content</div>
  </div>
</div>
Show
Jay M. Keith added a comment - 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). 
<ul>
    <h3><a>Title</a></h3>
     <div>CONTENT</div>
    <h3><a>Title</a></h3>
     <div>CONTENT</div>
</ul>
The example provided in the documentation (and example.html files) is below: 
<div id="accordion">
  <div>
    <h3><a href="#">First</a></h3>
    <div>First Content</div>
  </div>
 <div>
    <h3><a href="#">Second</a></h3>
    <div>Second Content</div>
  </div>
</div>
Hide
Permalink
Thorsten Ruf added a comment -

Sorry for invalid xhtml. Here are the correction:

<div>
    <h3><a>Title</a></h3>
     <div>CONTENT</div>
    <h3><a>Title</a></h3>
     <div>CONTENT</div>
</div>

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

Show
Thorsten Ruf added a comment - Sorry for invalid xhtml. Here are the correction: 
<div>
    <h3><a>Title</a></h3>
     <div>CONTENT</div>
    <h3><a>Title</a></h3>
     <div>CONTENT</div>
</div>
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
Hide
Permalink
Jay M. Keith added a comment -

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.

Show
Jay M. Keith added a comment - 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.
Hide
Permalink
Pedro Simões added a comment -

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

thnx

Show
Pedro Simões added a comment - after changing the $_elementHtmlTemplate variable in the helper it started to work thnx
Hide
Permalink
Benjamin Eberlei added a comment -

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.

Show
Benjamin Eberlei added a comment - 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.
Hide
Permalink
Benjamin Eberlei added a comment -

Changed priority to minor, because overriding is possible

Show
Benjamin Eberlei added a comment - Changed priority to minor, because overriding is possible
Hide
Permalink
Thorsten Ruf added a comment -

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

Show
Thorsten Ruf added a comment - 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)".
Hide
Permalink
Dolf Schimmel (Freeaqingme) added a comment -

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

Show
Dolf Schimmel (Freeaqingme) added a comment - Setting priority to critical. As the functionality clearly does not work (AT ALL!), and the functionality is therebye rendered useless.
Hide
Permalink
Ludwig Ruderstaller added a comment -

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:
<code>
<script type="text/javascript">
//<!--
$(document).ready(function() {
$("#navigation").accordion({});
});
$("#navigation").accordion({});
//-->

</script>
</code>

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

Show
Ludwig Ruderstaller added a comment - 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: <code> <script type="text/javascript"> //<!-- $(document).ready(function() { $("#navigation").accordion({}); }); $("#navigation").accordion({}); //--> </script> </code> so i ended up with calling addJavascript() with an empty string.
Hide
Permalink
Benjamin Eberlei added a comment -

Fixed in trunk and merged back into 1.8 release branch.

The use of 

$view->jQuery()->setUiVersion(...)
now switches 1.5 vs 1.7 behaviour.

Show
Benjamin Eberlei added a comment - Fixed in trunk and merged back into 1.8 release branch. The use of 
$view->jQuery()->setUiVersion(...)
now switches 1.5 vs 1.7 behaviour.
Hide
Permalink
Marc Grotholtmann added a comment -

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:

<div id="a">
<a href="#">a1</a><div>blabla</div>
<a href="#">a2</a><div>blabla</div>
<a href="#">a3</a><div>blabla</div>
</div>

<h3> around the <a></a> ist still missing, should be:

<div id="a">
<h3><a href="#">a1</a></h3><div>blabla</div>
<h3><a href="#">a2</a></h3><div>blabla</div>
<h3><a href="#">a3</a></h3><div>blabla</div>
</div>

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

$this->_elementHtmlTemplate = '<a href="#">%s</a><div>%s</div>';

to

$this->_elementHtmlTemplate = '<h3><a href="#">%s</a></h3><div>%s</div>';
Show
Marc Grotholtmann added a comment - 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: 
<div id="a">
<a href="#">a1</a><div>blabla</div>
<a href="#">a2</a><div>blabla</div>
<a href="#">a3</a><div>blabla</div>
</div>
<h3> around the <a></a> ist still missing, should be: 
<div id="a">
<h3><a href="#">a1</a></h3><div>blabla</div>
<h3><a href="#">a2</a></h3><div>blabla</div>
<h3><a href="#">a3</a></h3><div>blabla</div>
</div>
You have to change Line 146 in AccordionContainer.php (/extras/library/ZendX/JQuery/View/Helper) from 
$this->_elementHtmlTemplate = '<a href="#">%s</a><div>%s</div>';
to 
$this->_elementHtmlTemplate = '<h3><a href="#">%s</a></h3><div>%s</div>';

People

Vote (3)
Watch (6)

Dates

  • Created:
    Updated:
    Resolved:
Atlassian JIRA (v4.4.3#663-r165197) | Report a problem
Powered by a free Atlassian JIRA open source license for Zend Framework. Try JIRA - bug tracking software for your team.