Hello all,
It should go without saying that much thanks are due to Chris for his work on this extension. It’s amazing.
As many of you have probably already successfully done I’ve been struggling with creating Modal create/edit functionality using a combination of TbModal and TbGridView.
I have a add new feature working perfectly with validation using:
form:
<div class="form">
<?php /** @var Server $model */
/** @var AweActiveForm $form */ // <- extension is leveraging boostrap form
$form = $this->beginWidget('ext.AweCrud.components.AweActiveForm', array(
'id' => 'server-form',
'enableAjaxValidation' => true,
'enableClientValidation'=> true,
//'clientOptions'=>array('validateOnSubmit'=>true),
)); ?>
<p class="note">
<?= Yii::t('AweCrud.app', 'Fields with') ?> <span class="required">*</span>
<?= Yii::t('AweCrud.app', 'are required') ?>. </p>
<?= $form->errorSummary($model) ?>
<?= $form->textFieldRow($model, 'asset_id', array('class' => 'span5', 'maxlength' => 20)) ?>
<?= $form->dropDownListRow($model, 'customer_id', CHtml::listData(Customer::model()->findAll(), 'id', Customer::representingColumn())) ?>
<?= $form->textFieldRow($model, 'hostname', array('class' => 'span5', 'maxlength' => 255)) ?>
<?= $form->textAreaRow($model,'description',array('rows'=>6, 'cols'=>50, 'class'=>'span5')) ?>
<?= $form->dropDownListRow($model, 'rack_id', CHtml::listData(Rack::model()->findAll(), 'id', Rack::representingColumn())) ?>
<?= $form->textFieldRow($model, 'serial_number', array('class' => 'span5', 'maxlength' => 20)) ?>
<div class="form-actions">
<?php
//if ($model->isNewRecord)
//redirects on update modal
$this->widget('bootstrap.widgets.TbButton', array(
'buttonType'=>'submit',
'type'=>'primary',
'label'=>$model->isNewRecord ? Yii::t('AweCrud.app', 'Create') : Yii::t('AweCrud.app', 'Save'),
));
//else
?>
</div>
<?php $this->endWidget(); ?>
</div>
controller:
public function actionCreate()
{
$model = new Server;
$this->performAjaxValidation($model, 'server-form');
if(isset($_POST['Server']))
{
$model->attributes = $_POST['Server'];
if($model->save())
{
if (Yii::app()->request->isAjaxRequest)
{
echo CJSON::encode(array(
'status'=>'success',
'div'=>"Server successfully added"
));
exit;
}
else
$this->redirect(array('view','id'=>$model->id));
}
}
if (Yii::app()->request->isAjaxRequest)
{
echo CJSON::encode(array(
'status'=>'failure',
'div'=>$this->renderPartial('_form', array('model'=>$model), true)));
exit;
}
else $this->render('create',array('model'=>$model,));
}
and a stand alone button and JS for it in the view:
<script type="text/javascript">
function addServer()
{
<?php echo CHtml::ajax(array(
'url'=>array('server/create'),
'data'=> "js:$(this).serialize()",
'type'=>'post',
'dataType'=>'json',
'success'=>"function(data)
{
if (data.status == 'failure')
{
$('#addModal div.divForCreate').html(data.div);
// Here is the trick: on submit-> once again this function!
$('#addModal div.divForCreate form').submit(addServer);
}
else
{
$('#addModal div.divForCreate').html(data.div);
$.fn.yiiGridView.update('server-grid');
setTimeout(\"$('#addModal').dialog('close') \",3000);
}
} ",
))?>;
return false;
}
</script>
<?php $this->widget('ext.bootstrap.widgets.TbButton', array(
'label'=> 'Add Server',
'size' => 'small',
'type'=>'primary',
'htmlOptions'=>array(
//'data-toggle'=>'modal',
'url'=>'#',
'data-target'=>'#addModal',
'onclick'=>"{addServer(); $('#addModal').modal();}"
),
)); ?>
This works perfectly, fields are validated and the controller returns success to the modal (I’ll add the closing later). What’s been causing me to bang my head is when I try to make the update modal work using:
'update'=>
array(
'url'=>'Yii::app()->createUrl("server/update", array("id"=>$data->id))',
'options'=>array(
'ajax'=>array(
'type'=>'POST',
'url'=>"js:$(this).attr('href')",
//'data'=> "js:$(this).serialize()",
'ajaxUrl' => 'Yii::app()->createUrl("server/update", array("id"=>$data->id))',
'dataType'=>'json',
'success'=>'function(data){
if (data.status == "success"){
alert(data);
$("#viewModal").modal("hide");
// $.fn.yiiGridView.update("server-grid");
setTimeout(function(){location.reload(true);},400);
}else{
$("#viewModal .modal-body p ").html(data.div);
$("#viewModal").modal();
}}',
),
),
),
in a TbButtonColumn button declaration I can’t seem to keep the form from redirecting to the view on success or update form on validation fail.
Basically it seems like the button isn’t creating an ajax call and retrieving the data back into the success function for me to process.
Does anyone know what I’m missing? I’m sure it’s something easy that I’m overlooking but I tried everything from hunting down every attribute I could think of on the button and going as far as creating another button on the form.
Any help would be wonderful!
Thanks for reading and thanks for a wonderful extension.
Thanks.