WikiSysop am 10. November 2024 um 21:12 Uhr

2024-11-10T21:12:53Z

← Nächstältere Version		Version vom 10. November 2024, 21:12 Uhr
Zeile 1:		Zeile 1:
	== ~~Neues~~ Listenelement per AJAX hinzufügen ==		== Listenelement per AJAX hinzufügen ==
	Beispielszenario:		Beispielszenario:
	: In einem Formular '''Hefte''' soll zur Dropdownliste '''Verlage''' ein neuer Verlag hinzugefügt werden.		: In einem Formular '''Hefte''' soll zur Dropdownliste '''Verlage''' ein neuer Verlag hinzugefügt werden.

WikiSysop: /* CJuiDialog */

2024-11-10T20:49:28Z

CJuiDialog

← Nächstältere Version		Version vom 10. November 2024, 20:49 Uhr
Zeile 50:		Zeile 50:
	==== CJuiDialog ====		==== CJuiDialog ====
	Am Ende des Formulars erzeugen wir einen Container für den CJuiDialog.		Am Ende des Formulars erzeugen wir einen Container für den CJuiDialog.
	~~Hiwer~~ wird das Eingabeformular für den neuen Verlag dargestellt.		Hier wird das Eingabeformular für den neuen Verlag dargestellt.
	<pre><div id="verlagDialog" style="display:none"> </div></pre>		<pre><div id="verlagDialog" style="display:none"> </div></pre>

WikiSysop: 1 Version importiert

2020-10-07T16:02:46Z

1 Version importiert

← Nächstältere Version	Version vom 7. Oktober 2020, 16:02 Uhr
(kein Unterschied)

fg>WikiSysop: /* Controller */

2017-04-24T20:26:59Z

Controller

Neue Seite

== 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.
Hiwer wird das Eingabeformular für den neuen Verlag dargestellt.
<pre><div id="verlagDialog" style="display:none"> </div></pre>

=== 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 ===
[http://www.yiiframework.com/wiki/72/cjuidialog-and-ajaxsubmitbutton CJuiDialog and AjaxSubmitButton]

Yii Anwendung - Versionsgeschichte

WikiSysop am 10. November 2024 um 21:12 Uhr

WikiSysop: /* CJuiDialog */

WikiSysop: 1 Version importiert

fg>WikiSysop: /* Controller */