Thread: Use zend_form inside jquery tabcontainer

Most likely you'll have to do that in with a ViewScript.

Check out this article as I think it gives the most comprehensive explanation of how Zend_Form works.

Decorators with Zend_Form

Originally Posted by jsuggs

Most likely you'll have to do that in with a ViewScript.

Check out this article as I think it gives the most comprehensive explanation of how Zend_Form works.

Decorators with Zend_Form

I read the article, but I still don't get the idea.
I build some form as follow:

Code:

class Default_Form_My_Form extends Zend_Form
{
    public function init()
    {
        $this->setAction('/do/something')
             ->setMethod('post')
             ->setAttrib('id', 'my_form');
    }
    
    public function setTabs($obj)
    {
        $tabs = $obj->tabs;
        foreach($tabs as $elements)
        {
            foreach($elements as $element)
            {
                $this->addElement($element);
            }
        }
    }
    
}

In the above code I put all my elements in the form object.
I can't put each tab in tabPane like in the next code:

Code:

$view->tabPane("tabs", $paneContent, array('title' => $tab->name));

while $paneContent is html code of the tab.
after that I can echo the tabs:

Code:

$this->tabContainer("tabs", array());

How can I put each tab in tabPane via the form object?

I'm not a Zend_Form guru, so I don't know how you are going to do this the proper way, but what I was suggesting was to create the HTML markup manually and use it as the ViewScript.

Maybe post what you want your eventual HTML output to be and we can reverse engineer the Zend_Form way to do it.

Originally Posted by jsuggs

I'm not a Zend_Form guru, so I don't know how you are going to do this the proper way, but what I was suggesting was to create the HTML markup manually and use it as the ViewScript.

Maybe post what you want your eventual HTML output to be and we can reverse engineer the Zend_Form way to do it.

I need to build a zend_form object and output it to tabcontainer and each tab have a few elements from the form.

I'm stuck on this project almost one month.

If someone know where can I find some info or examples about how to do that, I would be grateful.

Thanks for the help.

Hey there, I've done this and can maybe help you out a bit.

First, here is a link to the reference on ZendX_JQuery_Form which you will want to extend instead of Zend_Form:

Zend Framework: Documentation

You have to download ZendX separately, but that is where the support for this feature is. Each of your tabs is going to be set up as a subform and you must have the (form and subform) decorators properly configured. My decorators look like this:

Code:

$this->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'div', 'id'=>'tabContainer', 'class'=>'mainForm')),
    array('TabContainer', array('id'=>'tabContainer', 'style'=>'width: 530px;')),
    'Form'
));
$subform = new ZendX_JQuery_Form();
$subform->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'div', 'class'=>'subForm')),
    array('TabPane', array('jQueryParams' => 
                          array('containerId' => 'mainForm', 
                                  'title' => "Page " . $subform_cnt))),
    'Form',
));

And then of course add the jQuery calls to your view...

Code:

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#tabContainer").tabs();
    });
</script>

If you have more questions I'll try to help.

Laura Dean, thanks for your reply.
I don't understand why i need to put each tab in sub-form, if all the data from all tabs send to one target.
I thought and tried to do that with display group and I didn't success to do that.

Thanks.

With some tweaks I successed to get it work with the next code:
[PHP]
$this->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'div', 'id'=>'tabContainer', 'class'=>'mainForm')),
array('TabContainer', array('id'=>'tabContainer')),
'Form'
));


foreach($tabs as $tab)
{
$elements = $tab->elements;
$this->addElements($elements);
$this->addDisplayGroup($tab->elements_names, $tab->name,
array('disableLoadDefaultDecorators' => true));
$display_group = $this->getDisplayGroup($tab->name);
$display_group->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'div')),
array('TabPane', array('jQueryParams' =>
array('containerId' => $this->id,
'title' => "Page " . $tab->name))),
'Form',
));
}
[/PHP]

Laura Dean - Thanks for the tip.

with the above example i've got html bug with div which contain form variables (like method and action):
[PHP]
<div id="tabContainer" class="ui-tabs ui-widget ui-widget-content ui-corner-all"
method="post" action="/catalog/save">
[/PHP]
I don't know if it's my syntax of the php code or zend framework bug.