Bootstrap Drop Down List Dinamica Con Ajax

Ciao a tutti, ho un problema per metà.

Utilizzo bootstrap e ho creato due drop down list, dove la seconda è dinamica.

il codice che crea tutto nella view è questo:




echo CHtml::dropDownList('from','', 

  array(Landing::model()->placeFrom()),

  

  array(

  	'encode'=>false,

  	'data-width'=>'49%',

  	'data-size'=>'6',

  	'prompt'=>'From..',

    'class'=>'selectpicker',

    'ajax' => array(

    	'type'=>'POST', 

    	'url'=>CController::createUrl('loadcities'), 

    	'update'=>'#to', 

    	'data'=>array('from_id'=>'js:this.value'),

    	)

    )); 




La prima lista la si vede perfettamente, mentre la seconda lista viene creata in questo modo




echo CHtml::dropDownList('to_id','', array(), 

array(

	'encode'=>false,

  	'data-width'=>'50%',

  	'data-size'=>'6',

  	'prompt'=>'To..',

    'class'=>'selectpicker',

));



Mi crea il secondo drop down list naturalmente vuoto, e fin qui ci siamo.

ora testando nel browser, la seconda lista pare non riempirsi, invece è falso.

cosa succede?

ho scoperto questo:




<select id="to" class="selectpicker" data-size="6" data-width="50%" style="display: none;">

   <optgroup label="Mountain" data-icon="">

      <option data-subtext="Italy">

         Ponte di Legno

       </option>

   </optgroup>

</select>

<div class="btn-group bootstrap-select" style="width: 50%;">

   <button class="btn dropdown-toggle" data-toggle="dropdown" type="button" data-id="to"> … </button>

   <ul class="dropdown-menu" role="menu">

      <li class="selected" rel="0">

         <a class="" tabindex="0"><span class="text"> … </span><i class="icon-ok check-mark"></i>

...............



In pratica mi riempe una select in alto ma non la lista e quindi non risulta visibile.

il codice jquery che mi viene generato dal sistema è corretto e lo condivido




 <script type="text/javascript">

/*<![CDATA[*/

jQuery(function($) {

jQuery('body').on('change','#from',function(){jQuery.ajax({'type':'POST','url':'/site/landing/loadcities','data':{'from_id':this.value},'cache':false,'success':function(html){jQuery("#to").html(html)}});return false;});

});

/*]]>*/

</script>



Perché si prende gioco di me? come potrei risolvere?

grazie a tutti e spero che qualcuno di voi possa aiutarmi che sono due giorni che ci perdo tempo.

Al di la della semantica di questa frase:

Hai scritto un post un po’ in confusione. Si tratta di due dropdown dipendenti?

devi vedere se c’è un modo per fare il refresh del widget bootstrap/js (se ho capito bene con due normali select dovrebbe funzionare… se non hai ancora provato, prova! :D)

nella prima select ho visto che scrivi




 'update'=>'#to', 



ma la seconda select non ha id="to", sbaglio?

scusate, pensavo mi arivassero le notifiche via email ma non è così.

Alla fine sbattendoci la testa ci sono riuscito.

Però comunque sia rendere le select dinamiche in ajax con bootstrap è completamente un macello.

Il problema non era yii ma bootstrap

p.s. il codice sopra è esatto, ma avevo fatto delle modifiche mentre scrivevo nel forum e quindi è possibile che ci sia stata una dimenticanza negli id

non è tanto bootstrap in se, ma è quando lavori con widget js che le cose si incasinano un pochino.