Hi everyone, please help. I’m having difficulties in setting up ajax with my gridview and form. The scenario is this :
- I am calling actionList from my UserController
public function actionList()
{
$model = new User('search');
$model->unsetAttributes();
if (isset($_GET['pageSize'])) {
Yii::app()->user->setState('pageSize',(int)$_GET['pageSize']);
unset($_GET['pageSize']);
}
if(isset($_GET['User']))
$model->attributes = $_GET['User'];
$newModel = new User('add');
$this->performAjaxValidation($newModel);
Yii::app()->clientScript->scriptMap = array(
'jquery-ui.css' => false
);
$editOptions = array(
'title' => 'Update User',
'url' => 'Yii::app()->createAbsoluteUrl("'.$this->module->params["controllersModule"].'user/edit",
array("id"=>$data->'.$model->tableSchema->primaryKey.', "processOutput" => false))',
'targetId' => 'user-content'
);
$this->renderPartial('list', compact('model', 'newModel', 'editOptions'), false, true);
}
public function actionEdit($id, $processOutput = true)
{
$model = $this->loadModel($id);
$this->performAjaxValidation($model);
...
$this->renderPartial('edit', compact('model'), false, true);
}
- Now, what I want is that when user click edit on the cgridview cbuttoncolumn, it displays the data via ajax in the form located below the gridview. So this is my code :
<?php
// CGridview
...
'edit' => array(
'label' => 'Edit',
'url' => $editOptions["url"],
'options' => array('id'=>'cbutton_'.uniqid()),
'imageUrl' => Yii::app()->request->baseUrl.'/images/icons/pencil.purple.small.png',
'click' => "function(){
$.fn.yiiGridView.update('".$gridId."', {
type : 'POST',
dataType: 'html',
url : $(this).attr('href'),
success : function(data) {
$.fn.yiiGridView.update('".$gridId."');
$('#".$editOptions["targetId"]."').html(data);
}
});
return false;
}"
),
...
?>
<?php
// Form
$form = $this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation' => true,
'enableClientValidation' => true,
'clientOptions' => array(
'validateOnSubmit' => true,
'validateOnChange' => true,
'beforeValidate' => "js:function(form) {
Loading.show();
return true;
}",
'afterValidate'=>'js:function(form, data, hasError) {
Loading.hide();
if (!hasError) {
$.ajax({
"dataType" : "json",
"type" : "POST",
"url" : "'.$url.'",
"data" : form.serialize(),
"success": function(data) {
$("div.success-msg").html(data.msg);
$.fn.yiiGridView.update("'.$gridId.'");
$("#'.$formId.'")[0].reset();
return true;
}
});
}
}'
),
'htmlOptions'=>array(
'onsubmit'=>"return false;", /* Disable normal form submit */
'enctype'=>'multipart/form-data'
)
)
);
...
echo CHtml::ajaxSubmitButton(
$model->isNewRecord? 'Add' : 'Update','',
array('beforeSend'=> 'js:$.yii.fix.ajaxSubmit.beforeSend("#user-form")'),
array('id'=>'submit-btn-'.uniqid(), 'live'=>false)
);
?>
Problem :
When I click edit button on my gridview for the first time, the data displays in the form below the gridview correctly and ajax validation on my form works correctly also. But when I click another edit button on my gridview ( the second time and so on ), the ajax on my gridview button does not work and instead of replacing the form below, it redirects the page.
Firebug displays this console error when I click the submit button on my form :
TypeError: $.yii is undefined"
It happens if I set $processOutput of the renderPartial to true.
public function actionEdit() {
...
$this->renderPartial('edit', compact('model'), false, true); // processOutput = true
}
But if I change $processOutput to false, it works vice versa. All my gridview button correctly replacing the form below with the data rendered from controller ( on first click and so on ), but my ajax validation in my form does not work ( when I click the submit button nothing happened and ajax validation onchange does not work ) :
public function actionEdit() {
...
$this->renderPartial('edit', compact('model'), false, false); // processOutput = false
}
It seems like if I set the processOutput to false, the ajax on my cgridview button works but the ajax on my form does not. And if I set to true, the ajax on my form works but my cgridview button does not. Anyone know the solution ? Please help, thanks