CJuiTabs problem (add php code)

hello!

Here is my problem:

I have DropDownList with customers names, and CJuiTabs where i have tabs like: "Customer Address", "Customer Loans", "Customer Bank Info" and so on.

file: pozyczka/_form.php

echo $form->dropDownList($model, 'klient_id', GxHtml::listDataEx(Klient::model()->findAllAttributes(null, true)),array(

  'prompt'=>'Wybierz klienta',

  'ajax'=>array('type'=>'POST',

                'url'=>CController::createUrl('Pozyczka/ajaxtabs'),

                'update'=>'#yw0_tab_"+$("#yw0").tabs("option","selected")+"',

                'data'=>'js:{tab:$("#yw0").tabs("option","selected"),

                             klient_id:$("#Pozyczka_klient_id").val()}'))); 


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

		  'tabs'=>array(

		    'Adres'=>array('ajax'=>array('ajaxtabs_kontakt')),

		    'Adres korespondencyjny'=>array('ajax'=>array('ajaxtabs_kontakt_kor')),

		    'Dane osobowe'=>array('ajax'=>array('ajaxtabs_dane_osobowe')),

		    'Dochody'=>array('ajax'=>array('ajaxtabs_dochody')),

		    'Pożyczki'=>array('ajax'=>array('ajaxtabs_pozyczki')),

		    ),

		  'options'=>array(

		    'collapsible'=>true,

		    'selected'=>0,

		    'ajaxOptions'=>array('data'=>'js:{klient_id:$("#Pozyczka_klient_id").val()}','type'=>'POST'),

   ),

		  'htmlOptions'=>array(

		    'style'=>'width:300px;'

		    ),

		  ));

file: PozyczkaController.php

public function actionAjaxTabs(){

 if(isset($_POST['tab'])) $tab=$_POST['tab'];

 else $tab=0;

    switch($tab){

      case 0: $this->renderPartial('_klient_kontakt',array('klient_id'=>$_POST['klient_id']));break;

      case 1: $this->renderPartial('_klient_kontakt_kor',array('klient_id'=>$_POST['klient_id']));break;

      case 2: $this->renderPartial('_klient_dane_osobowe',array('klient_id'=>$_POST['klient_id']));break;

      case 3: $this->renderPartial('_klient_dochody',array('klient_id'=>$_POST['klient_id']));break;

      case 4: $this->renderPartial('_klient_pozyczki',array('klient_id'=>$_POST['klient_id']));break;  

    }

	}

	

public function actionAjaxTabs_kontakt(){

   $this->renderPartial('_klient_kontakt',array('klient_id'=>$_POST['klient_id']));

}

public function actionAjaxTabs_kontakt_kor(){

   $this->renderPartial('_klient_kontakt_kor',array('klient_id'=>$_POST['klient_id']));

}

...

file: _klient_kontakt.php

if($klient_id=="" or $klient_id==0) $model= new Klient;

else $model=$this->loadModel($klient_id,'Klient');

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

  'data'=>$model,

  'attributes'=>array(

    'telefon1',

    'telefon2',

    'zam_ulica',

    'zam_nr_domu',

    'zam_lokal',

    'zam_kod_pocztowy',

    'zam_miejscowosc',

    ),

  )

);

When I choose a customer from dropDownList, I want the active tab to be updated, and this work fine.

When I change a tab I’d like system to check who is selected on dropDownList, achieve data from DB and display appropriate data on just selected tab. And this doesn’t work at all. When I change tab it acts like there is no selection done on dropDownList.

Please help me.

Hi dragonka,

The value of your dropDownList is only POSTed when you change it, thus only the active tab can get the value of the dropdown. I suggest you set a session variable / cookie for the value of the dropdownlist everytime you change it, and get that value everytime you are loading the tab contents.

Hi.

So what for is this:

'ajaxOptions'=>array('data'=>'js:{klient_id:$("#Pozyczka_klient_id").val()}','type'=>'POST'),

I thought that value of data (current value) is send every time I change the tab?

My solution works if i type for example 2 instead of $("#Pozyczka_klient_id").val()

I really don’t understand what’s going on…

Why setting data in dropDownList does work and identical setting data in CJuiTabs doesn’t work?

Idea of setting $_SESSION variable is very good, but… I’d like to know what I’m doing wrong.

I found it.

This is the solution:

Since this runs when you first create the tabs:

data: $("#myform").serialize(),

The data is whatever it was then, it’s never updated. The easiest solution here is just to update that data when it’s needed, by using the tab’s select event, like this:

$( "#tabs" ).tabs({

  select: function() {

    $(this).tabs("option", { ajaxOptions: { data: $("#myform").serialize() },type:"POST" });

  },

  ajaxOptions: {

    type: 'post',

    error: function( xhr, status, index, anchor ) {

      $( anchor.hash ).html(

        "Couldn't load this tab. We'll try to fix this as soon as possible. " +

        "If this wouldn't be a demo." );

    }

  }

});

Hi dragonka,

Sorry if was not able to reply immediately, but I am glad you got it rolling now.

It is a good thing that you are sharing how you resolve your issue. Keep it up (+1 for that).