Yii Anwendung
Neues 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.