How to refresh form using render partial

Hi all,

I use a form as a partial view within my main admin view. In my admin view I have a grid, when click one row of the grid, corresponding date will be filled the partial form view. Then edit form data and save it. Everything works fine except that the partial view doesn’t refresh after ajax submit (save), the error summary doesn’t rendered.

By using chrome inspect tool I can see that the result partial view has been returned but it doesn’t get refreshed.

My problem have something in common with this one: errorSummary on partial view

Can someone help me resolve my issue. Thanks.

Here is my code details:

I have my admin view (admin.php), which render a partial view using:

echo $this->renderPartial(’_detail’, array(‘model’=>$model));




<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'product-grid',

	'dataProvider'=>$model->search(),

	'selectionChanged'=>'updateDetailForm',

	'filter'=>$model,

    ),

	'columns'=>array(

		'id',

		'title',

		'img',		

    	array(

            'name'=>'category_id',

            'value'=>'$data->category->name',

            'filter'=>CHtml::activeDropDownList($model, 'category_id', CHtml::listData(ProductCategory::model()->findAll(), 'id', 'name'), array('prompt' => 'All', 'encode' => false)),

    		'htmlOptions'=>array('width'=>'90px'),

        ),

		array(

			'class'=>'CButtonColumn',

		),

	),

)); ?>

</td>

<td>

<div>

<div>


<div id="detail_form">

<?php echo $this->renderPartial('_detail', array('model'=>$model)); ?>

</div>


</div>

</td>

</tr>

</table>


<script type="text/javascript">

	function updateDetailForm(target_id) {

		var id =$.fn.yiiGridView.getSelection(target_id);			

		$('#product_id').val(id);		

		$('#save_btn').attr('disabled', (id > 0 ? false : true));

	

		$.getJSON('<?php echo $this->createUrl('UserinputData'); ?>?id='+id,

			function(data) {

				$('#product_title').val(data.title);

				$('#product_img').val(data.img);

				$('#product_category_name').val(data.category_id);

			});

	}

	

	

	function formSaved(data, textStatus, XMLHttpRequest) {

		$.fn.yiiGridView.update('product-grid');

	}

</script>



And my partial view _detail (_detail.php):




<div class="form">


<?php $form=$this->beginWidget('CActiveForm', array(

	'id'=>'product-detail',

	'enableAjaxValidation'=>true,

)); ?>


	<p class="note">Fields with <span class="required">*</span> are required.</p>


	<?php echo $form->errorSummary($model); ?>


	<div class="row">

		<?php echo $form->labelEx($model,'title'); ?>

		<?php echo $form->textField($model,'title',array('size'=>45,'maxlength'=>45, 'id'=>'product_title')); ?>

		<?php echo $form->error($model,'title'); ?>

	</div>


	<div class="row">

		<?php echo $form->labelEx($model,'img'); ?>

		<?php echo $form->textField($model,'img', array('id'=>'product_img')); ?>

		<?php echo $form->error($model,'img'); ?>

	</div>


	<div class="row">

		<?php echo $form->labelEx($model,'category_name'); ?>

		<?php

			echo CHtml::activeDropDownList($model, 'category_id', 

										   CHtml::listData(ProductCategory::model()->findAll(), 'id', 'name'), 

										   array('encode' => false, 'id'=>'product_category_name')

										   );			

		?>

	</div>


	<div class="row buttons">

		<?php echo CHtml::hiddenField('product_id', 0); ?>

		 

		<?php 

//		echo CHtml::ajaxButton('Save', 

//									 $this->createUrl('userinputSave'),

//									 array('type'=>'POST', 'success'=>'formSaved', 'update'=>'#detail_form'), 

//									 array('disabled'=>"disabled", 'id'=>'save_btn'));

		echo  CHtml::ajaxSubmitButton( 'Save',

                               $this->createUrl('userinputSave'),

                               array('type'=>'POST','success'=>'formSaved'),

                               array('disabled'=>"disabled", 'id'=>'save_btn'));

		

		?>

	</div>


<?php $this->endWidget(); ?>


</div><!-- form -->



In my ProductControl.php I have the following to handle ajax request:




public function actionUserinputSave()

	{		

		if (isset($_POST['product_id']) && isset($_POST['Product'])) {

			

			$product_id = (int)$_POST['product_id'];

			

			$model = null;

			if ($product_id == 0) {

				// New product

				$model = new Product;

			}

			else {

				// Update product

				$model = $this->loadModel($product_id);

			}

			//$this->performAjaxValidation($model);

			

			$model->attributes=$_POST['Product'];

			$model->save();

			$this->renderPartial('_detail',array(

					'model'=>$model,

			)

			, false, true);

		}

	}



Thanks for your reading !

Instead of using an ajax submit button, take a look at this wiki.

Don’t care of the part about juidialog, focus on the work done on the onsubmit of the form.

You should have a function that return you a proper json, with a state (saved/failure) and with the partial views needed for replacement.

Hi zaccaria,

Thanks very much, after reading this wiki, I have worked it out. -).

Submit form data outside the form, and then replace it with returned content.