Yii Anwendung

Listenelement per AJAX hinzufügen

Beispielszenario:

In einem Formular Hefte soll zur Dropdownliste Verlage ein neuer Verlag hinzugefügt werden.

Formular

Im Formular Hefte soll die Möglichkeit geschaffen werden, einen neuen Verlag einzugeben.

Ajax Button neben dem Label der Liste

• Label

echo $form->labelEx($model,'Verlag_Id',array('style'=>'float:left;margin-right:10px;'));

• AJAX Link:

echo CHtml::ajaxLink(
    'Neu',
    $this->createUrl('verlage/addnew'),
    array('onclick'=>"$('#verlagDialog').dialog('open'; return false;",
          'update'=>'#verlagDialog'),
    array('id'=>'showVerlagDialog',
          'style'=>'display:block;',
          'tabindex'=>'-1'));
$Verlage = CHtml::listData(Verlage::model()->findAll(array('order'=>'Name ASC')),'Id', 'Name');
echo $form->dropDownList($model,'Verlag_Id', $Verlage, array('empty'=>,'style'=>'width:200px;')); ?>

Link direkt in die Liste einbauen

• Liste erweitern um ein Element prompt

$Verlage = CHtml::listData(Verlage::model()->findAll(array('order'=>'Name ASC')),'Id','Name');
$Verlage = array('type'=>'dropdownlist',
   'items'=>$verlage,
   'prompt'=>'Neuer Verlag',
   'empty'=>
);

• Im Formular folgendes AJAX Script registrieren

Yii::app()->clientScript->registerScript('helper',"
   $('#form').on('change', 'select', function() {
       if($(this).find(':selected').text() == 'Neuer Verlag') {
           var url = '".$this->createUrl('verlage/addnew&dropDownId=')."';
       }
       if ( url ) {
           var dropDownId = $(this).attr('id');
           url = url + dropDownId;
           $.ajax({
               'type':'POST',
               'url': url,
               'cache': false,
               'success': function(html){
                   $('#verlagDialog').html(html);
               }
           });
           return false;
       }
   });
   ", CClientScript::POS_READY);

CJuiDialog

Am Ende des Formulars erzeugen wir einen Container für den CJuiDialog.

Hier wird das Eingabeformular für den neuen Verlag dargestellt.

<div id="verlagDialog" style="display:none"> </div>

Controller

Im Verlage Controller wird eine eigene Action für das Erzeugen des neuen Verlages definiert.

public function actionAddnew() {
   $model=new Verlage;
   if(isset($_POST['Verlage'])) {
       $model->attributes=$_POST['Verlage'];
       if($model->save()) 
            echo CHtml::tag('option',array (
                'value'=>$model->Id,
                'selected'=>true
            ),CHtml::encode($model->Name),true);
   } else {
       Yii::app()->clientScript->scriptMap['jquery.js'] = false;
       Yii::app()->clientScript->scriptMap['jquery.min.js'] = false;
       $this->renderPartial('create',array('model'=>$model,),false,true);
   }
}

Es wird ein <option> Element erzeugt, das per AJAX zurückgegeben wird.

View

form

In der Formular - View Verlage soll das Eingabeformular für einen neuen Verlag in einem CJuiDialog versteckt.

Der CJuiDialog wird nur dann erzeugt, wenn vom Controller die Action addnew übergeben wurde.

if ( strtolower($this->action->id) == 'addnew' )
   $this->beginWidget('zii.widgets.jui.CJuiDialog',array(
       'id'=>'verlagDialog',
       'options'=>array(
           'title'=>'Neuer Verlag',
           'autoOpen'=>true,
           'modal'=>'true',
           'width'=>'auto',
           'height'=>'auto',
       ),
   ));
$this->renderPartial('_form', array('model'=>$model));

_form

Das im CJuiDialog angezeigte Formular bekommt einen Submit Button zum Speichern über AJAX

if ( strtolower($this->action->id) == 'addnew' ) {
    if ( $dropDownId ) $dropDownId = "#".$dropDownId;
        else $dropDownId = '#Werke_Verlag_Id';
    echo CHtml::ajaxSubmitButton(
        'Datensatz speichern',
        CHtml::normalizeUrl(array('komponisten/addnew','render'=>false)),
        array('cache'=>false,
            'success'=>"js: function(data) {
                 $('".$dropDownId."').append(data);
                 $('#composerDialog').dialog('close');
             }"),
        array('id'=>uniqid()));
 } else echo CHtml::submitButton($model->isNewRecord ? 'Neuen Datensatz speichern' : 'Änderungen speichern');?>

Der über AJAX bezogene neue Listeneintrag wird nach dem Speichern der Formulareingaben an die Dropdownliste angehängt.

Der neue Eintrag wird ausgewählt.

Das Dialogfenster wird automatisch geschlossen.

Quelle

CJuiDialog and AjaxSubmitButton