CJuiTabs With Ajax Requests

I was trying to call AJAX Request to upload content in a tab of CJuiTabs but it was not working rather than wearied behaviors were observerd.

No matter what AJAX call is made in Tabs it is sent more than once time and what ever you echo no matter in CJSON or Html format it gets returned more than one time

I had Created a New Application from Scratch and used CJuiTabs in following structure

CJuiTabs

=>Tab1 (static content)

=>Tab2 =>renderPartial => pages/_accountInfo

_accountInfo=>renderPartial =>_viewAccountInfo

Contents are as follow

settings.php (Where CJuiTabs are used)


<?php $this->widget('zii.widgets.jui.CJuiTabs', array(

    'tabs'=>array(

        'Personal Information'=>'some content',

        'Accounts Information'=>$this->renderPartial('pages/_accountInfo', array('model'=>$model),true,true),

    ),

    // additional javascript options for the tabs plugin

    'options'=>array(

        'collapsible'=>true,

        'selected'=>$tabPage

    ),

));

?>

_accountInfo.php


<div id="account-fields"> 

    <?php $this->renderPartial('pages/_viewAccountInfo',array('model'=>$model))?>

</div>

_viewAccountInfo




<div class="right">

        <?php echo CHtml::ajaxLink('Modify',CController::createUrl('AjaxLoadEditForm'),array('update'=>'#account-fields'));?>        

</div>

<div class="left">

    <label class="span-5">Company Name: </label><label><b><?php echo $model->developerProfile->company_name?></b></label><br/><hr/> 

    <label>Company Type: </label><label><b><?php echo $model->developerProfile->companyType->type?></b></label><br/><hr/>

</div>



<div class="right">

&lt;?php echo CHtml::ajaxLink('X',CController::createUrl('AjaxLoadView'),array('update'=&gt;'#account-fields'));?&gt;        

</div>

_formAccountInfo


<div class="form">


<?php $form=$this->beginWidget('CActiveForm', array(

	'id'=>'user-form',

	'enableAjaxValidation'=>true,

)); ?>

	<?php echo $form->errorSummary($model); ?>


	<div class="row">

            <?php echo $form->labelEx($model,'vat_num',array('class'=>'span-5 padding-top')); ?>

            <?php echo $form->textField($model,'vat_num',array('type'=>'text','style'=>'width:280px','maxlength'=>255)); ?>

            <?php echo $form->error($model,'vat_num'); ?>		

	</div>

        <div class="row">

            <?php echo $form->labelEx($model,'company_type_id',array('class'=>'span-5 padding-top')); ?>

            <?php echo $form->DropDownList($model,'company_type_id',CHtml::ListData(CompanyType::model()->findAll(),'id','key'),array('style'=>'width:290px')); ?>

            <?php echo $form->error($model,'company_type_id'); ?>		

	</div>

        <div class="row">

            <?php echo $form->labelEx($model,'company_name',array('class'=>'span-5 padding-top')); ?>

            <?php echo $form->textField($model,'company_name',array('style'=>'width:280px','maxlength'=>255)); ?>

            <?php echo $form->error($model,'company_name'); ?>		

	</div>

        <div class="row">

            <?php echo $form->labelEx($model,'prefered_payment_type_id',array('class'=>'span-5 padding-top')); ?>

            <?php echo $form->DropDownList($model,'prefered_payment_type_id',CHtml::ListData(PreferedPaymentType::model()->findAll(),'id','key'),array(

                'style'=>'width:290px',

                'ajax' => array(

                    'type'=>'POST', //request type

                    'url'=>CController::createUrl('AjaxLoadEditForm'), //url to call.

                    //Style: CController::createUrl('currentController/methodToCall')

                    'update'=>'#account-fields', //selector to update

                    //'data'=>'js:javascript statement' 

                    //leave out the data key to pass all form values through

                    )

                )); ?>

            <?php echo $form->error($model,'prefered_payment_type_id'); ?>		

	</div>

        <div class="row buttons">

		<?php echo CHtml::submitButton('Update'); ?>

	</div>

<?php $this->endWidget(); ?>


</div><!-- form -->



Action that form closing calls to show info and hide form


 public function actionAjaxLoadView()

        {            

           echo $this->renderPartial('pages/_viewAccountInfo',array('model'=>$user),false,true);           

            yii::app()->end();                     

        }



Action that is called when user wants to add data so form should be rendered


   public function actionAjaxLoadEditForm()

        {           

            $developerProfile = new DeveloperProfile;

            if (isset ($_POST['DeveloperProfile']))

                $developerProfile->setScenario($_POST['DeveloperProfile']['prefered_payment_type_id']);

            else

                 $developerProfile->setScenario('1');

            $developerProfile->user_id = $user->id;

            echo $this->renderPartial('pages/_formAccountInfo',array('model'=>$developerProfile),false,true);

            yii::app()->end();                  

        }

Problem is that it works fine but more than one AJAX calls are made if and only if Ajax Link is in CJuiTab page

here is sample picture of ajax calls you would notice the repetitive files loading

In given picture not all could be shown but 16 total requests were made. and funny thing is that if you do this one or two time the number of requests increase by multiple of 2 approximately. After 2-4 repetition browser page gets halt due to huge list of requests. Some time i have also observed that both reqests are made at once to show form and to hide form so things toggle.

I am not sure this is bug of CJuiTab but it seems to be happening :)

thanks

================UPDATE======================

I also noted that if there is ajax request in or before tab that uses renderPartial then this happens. for example this would cause problem


$this->widget('zii.widgets.jui.CJuiTabs', array(

    'tabs'=>array(                'ased'=>CHtml::ajaxLink('Modify',CController::createUrl('AjaxLoadEditForm'),array('update'=>'#account-fields')),

        'Accounts Information'=>$this->renderPartial($prams['accInf'],array('model'=>$prams['accInfModel']),true,true),        ),

    // additional javascript options for the tabs plugin

    'options'=>array(

        'collapsible'=>true,

        'selected'=>$tabPage

    ),

));

This Works Fine


$this->widget('zii.widgets.jui.CJuiTabs', array(

    'tabs'=>array(                

        'Accounts Information'=>$this->renderPartial($prams['accInf'],array('model'=>$prams['accInfModel']),true,true),


'ased'=>CHtml::ajaxLink('Modify',CController::createUrl('AjaxLoadEditForm'),array('update'=>'#account-fields')),

        ),


    // additional javascript options for the tabs plugin

    'options'=>array(

        'collapsible'=>true,

        'selected'=>$tabPage

    ),

));

operating system

Windows 7

Web server

WAMP 2

browser type

Chrome

Yii version

i guess 1.1.10