Zend Framework Community › Zend MVC

Zend/JQuery collapsible fieldset

Classic

List

Threaded

1 message

Bill'o

Zend/JQuery collapsible fieldset

Hello,
I'm experimenting a weird behaviour of my Zend/Jquery built form,
I have built a complete form with zend, I set up fielset groups and would like now to make them collapsible with jQuery. I did it already with a normal html file and because of my lack of skills about zendframework, I tried to follow the same "spirit" on the zend form.
Basically the problem is that the fieldset always toggles down and not up. It works when I use the jQuery "hide" function which sets the display property to "none" but doesn't when it uses a jQuery method playing with the css in cache.
I know there would probably be a smarter to implement this feature with zend and you are very welcome if you point it to me :)

but here are the basic codes :

[url=http://www.hiboox.fr/go/images/informatique/untitled,0f51c660ec65f7fb5e87f5863695c0e5.jpg.html][img]http://free0.hiboox.com/images/0911/0f51c660ec65f7fb5e87f5863695c0e5.jpg[/img][/url]

the layout :

[code]<head>
<?php echo $this->headMeta(); ?>
<?php echo $this->headTitle(); ?>
<?php echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/site.css'); ?>
<?php echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/jquery.fancybox-1.3.4.css'); ?>
<?php $this->jQuery()->enable();
echo $this->jQuery();?>
<?php echo $this->headScript()->appendFile($this->baseUrl().'/scripts/jquery.fancybox-1.3.4.pack.js')?>
<?php echo $this->headScript()->appendFile($this->baseUrl().'/scripts/collapsible.js')?>

<script type="text/javascript"> $(document).ready(function() { $("#zob > legend").attr('id','msg_head'); $("#zob > legend").addClass('msg_head'); $("legend").next("dl").addClass('msg_body'); $(".msg_head").next(".msg_body").hide(); $(".msg_head").removeClass('msg_head').addClass('msg_head_collapsed'); $("#msg_head").collapsible(); $("a.popLink").fancybox({ 'overlayColor': '#333', 'padding': 10 }); }); </script>
</head>

<body>
<div id="content">

<?php echo $this->escape($this->title); ?>

<?php echo $this->layout()->content; ?>
</div>

</body>
</html>[/code]

the function :
[code]$.fn.collapsible = function ()
{

//toggle the component with class msg_body
$("#msg_head").click(function()
{
//var arrow = this.getElementsByTagName("img");
if ($(this).hasClass('msg_head_collapsed')){
$(this).removeClass('msg_head_collapsed').addClass('msg_head');
//arrow[0].src = "images/arrow_down.png";

}
else if ($(this).hasClass('msg_head')){
$(this).removeClass('msg_head').addClass('msg_head_collapsed');
//arrow[0].src = "images/arrow_right.png";

}

$(this).next(".msg_body").slideToggle('slow');

});................[/code]

the form : [code]<?php

class Application_Form_Testform extends Zend_Form
{

public function init()
{
$countryList=array('USA','UK');
$firstName = $this->createElement('text', 'firstName');
$firstName->setLabel('First Name')
->setAttrib('size',25)
->addValidator('StringLength', false,array(3,50))
->setValue('')
->setRequired(true);

$lastName = $this->createElement('text', 'lastName');
$lastName->setLabel('Last Name:')
->setAttrib('size', 25)
->addValidator('StringLength', false,array(3,50))
->setValue('')
->setRequired(true);

[....]

$this->addElements( array (

$firstName,
$lastName,
$address1,
$address2,
$postalCode,
$city,
$state,
$country,
$phone,
$emailAddress,
$website,
$userName,
$password,
$confirmPassword
)
);

$this->addDisplayGroup(array(

'firstName',
'lastName',
'userName',
'address1',
'address2',
'postalCode',
'city',
'state',
'country',
'phone'

),'contact');

$contact = $this->getDisplayGroup('contact');
/*$contact->setDecorators(array(

'FormElements',
'Fieldset',
array('HtmlTag',array('tag'=>'div','class'=>'msg_body'))

));*/

$contact->addDecorator('Fieldset');
$contact->setLegend('zoby zoba')->setAttrib('id', 'zob');

[/code]

thank you very much for the help...
Alex

Remove Ads