Use a form and CGridview in separate CJuiTabs (with same or multiple models) and submit all CJuiTabs simultaneously.

You are viewing revision #6 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.

« previous (#5)

Hi guys.

In order to submit all CJuiTabs together, they must be part of the same form.

You thus need to first create a mainform containing the CJuiTabs.

<div class="form"> 
 
        <?php  
                $form=$this->beginWidget('CActiveForm', array( 
                        'id'=>'default-parent-form', 
                        'enableAjaxValidation'=>false, 
                )); 
        ?> 
 
        <?php  
                $tabs = array(); 
         
                $tabs['Tab1 Name'] = array( 
                        'id'=>'dataFieldsTab', 
                        'content'=>$this->renderPartial('_formDataFields', array(
                                'form' => $form, 
                                'parent_model'=>$parent_model, 
                        ), 
                        true), 
                ); 
                 
                $tabs['Tab2 Name'] = array( 
                        'id'=>'linkedChildrenTab1', 
                        'content'=>$this->renderPartial('_formChildren1', array( 
                                'child_model'=>$child_model, 
                        ), 
                        true), 
                ); 
 
                $this->widget('zii.widgets.jui.CJuiTabs', array(  
                        'tabs' => $tabs, 
                        'options' => array( 
                                'collapsible' => false, 
                        ), 
                )); 
        ?> 
        
        /* IMPORTANT: Put your submit button BEFORE the CActiveForm endWidget() */

            ... submit button here
 
        <?php $this->endWidget(); ?> 
  
</div><!-- form -->

Each tab has a separate individual view. Mine are called _formDataFields and _formChildren1.

So the mainform, the submit button and all the views on the tabs, become part of the same form. This ensures that all tabs are submitted simultaneously.

Here is an example of _formDataFields (nothing special):

<?php echo $form->errorSummary($parent_model); ?> 
 
<div class="row"> 
        <?php echo $form->labelEx($parent_model,'branch_nr'); ?> 
        <?php echo $form->textField($parent_model,'branch_nr'); ?> 
        <?php echo $form->error($parent_model,'branch_nr'); ?> 
</div>
  
<div class="row"> 
        <?php echo $form->labelEx($parent_model,'branch_name'); ?> 
        <?php echo $form->textField($parent_model,'branch_name'); ?> 
        <?php echo $form->error($parent_model,'branch_name'); ?> 
</div>

Here is an example of _formChildren1 (nothing special):

<div class="form">
	<?php
		$this->widget('zii.widgets.grid.CGridView', array(
			'id'=>'gridview1',
			'dataProvider'=>$child_model->search(), 
			'filter'=>$child_model,
			'columns'=>array(
				'field1',
				'fueld2',
				array(
					'class'=>'CButtonColumn',
				),
			),
		));
	?>
</div>

You will see that $form is created in the mainform, and then passed by the CJuiTabs to the _formDataFields view, where it is used in the fields. It is not passed to _formChildren1, because the gridview does not need it. The gridview only needs the empty model that is uses to store the user's filtering criteria - if any.

The controller needs to pass ALL needed models to the mainform, where each tab passes $form (if needed) and the individual model (if needed) further to the views. (Obviously you can pass multiple models to the individual views if required.)

After form submission, you have to test in the controller that you received all models back from the client e.g.

if(isset($_POST['ar_parent_model']))
{
   ... // update data
}
if(isset($_POST['ar_child_model']))
{
   ... // sort gridview
}

Hope this helps someone.

3 0
6 followers
Viewed: 20 229 times
Version: Unknown (update)
Category: How-tos
Written by: Gerhard Liebenberg
Last updated by: Gerhard Liebenberg
Created on: Mar 26, 2013
Last updated: 10 years ago
Update Article

Revisions

View all history