diff bootstrapAbbiamo di recente sostituito il template di un'applicazione da quello standard a quello fornito dall'estensione Yii Bootstrap, di migliore impatto e con funzionalità molto utili, oltre che accattivanti.

Tra i vari widget disponibili in Bootstrap c'è Typeahead, l'equivalente dell'autocompletamento in Yii. Nel caso l'elenco dei valori disponibili sia predeterminato e fisso la sostituzione è indolore, una leggera complessità si aggiunge nel caso i valori siano da reperire tramite un'azione esterna (ajax).

La sostituzione non è particolarmente difficile ma richiede alcune piccole modfiche al codice.

Partiamo dal widget esistente:

echo '<div class="row">';
echo $form1->label($model,'codice_da');
$this->widget('zii.widgets.jui.CJuiAutoComplete',
  array(
    'model'=>$model,
    'attribute'=>'codice_da',
    'source'=>$this->createUrl('card/autocompletaCard'),
    'options'=> array(
      'showAnim'=>'fold',
    ),
    'htmlOptions'=>array (
      'style'=>'text-transform: uppercase',
     ),
     'cssFile'=>false,
   )
);
echo $form1->error($model,'codice_da');
echo "</div>";

Come vediamo abbiamo un modello $model con attributo codice_da e l'autocompletamento viene fatto dall'azione autocompletaCard presente nel controller card. Questa funzione deve restituire i risultati in formato JSON.

 

Il nuovo widget sarà composto come segue:

echo $form1->label($model,'codice_da');
$this->widget('bootstrap.widgets.TbTypeahead',array(
  'model'=>$model,
  'attribute'=>'codice_da',
  'options'=> array(
    'source'=>'js:function(query,process){
      $.ajax({
        url: "'.$this->createUrl('card/autocompletaCard').'",
        type: "GET",
        dataType:"json",
        data: {term: query},
        success: process,
      });
    }', 
  ),
  'htmlOptions'=>array (
    'style'=>'text-transform: uppercase',
  ),
));
echo $form1->error($model,'codice_da');

 

Come vediamo il widget è praticamente simile a quello dell'esempio fornito dalla documentazione dell'estensione, con la variante che il parametro source diventa una funzione anziché un semplice array. La chiave è la chiamata a process che passa il risultato della chiamata al widget per la creazione della tendina.

We use cookies to improve our website and your experience when using it. Cookies used for the essential operation of this site have already been set. To find out more about the cookies we use and how to delete them, see our privacy policy.

  I accept cookies from this site.
EU Cookie Directive Module Information