Gridview Update from DetailView

I’ve been searching for a solution but have been unable to find one.

I currently have a summary gridview with some editablecolumns and a linkcolumn that loads a detailview via ajax with x-editable fields. (note: i’m using yiibooster)



The desired action is for calculations to occur and be shown in the summary gridview once the x-editablefields have been saved.

It seems the ajax loading of the detail view breaks the update function of the gridview. I’ve added the following to try and fix that but it did not.


if( Yii::app()->request->isAjaxRequest && ($action != 'ViewDetails')) {

            Yii::app()->clientScript->scriptMap['jquery.js'] = false;

            Yii::app()->clientScript->scriptMap['jquery.min.js'] = false;

            Yii::app()->clientScript->scriptMap['jquery.yiigridview.js'] = false;

			Yii::app()->clientScript->scriptMap[''] = false;

			Yii::app()->clientScript->scriptMap['bootstrap.min.js'] = false;

			Yii::app()->clientScript->scriptMap['bootstrap-datepicker.min.js'] = false;

			Yii::app()->clientScript->scriptMap['bootstrap-datepicker-noconflict.js'] = false;

			Yii::app()->clientScript->scriptMap['bootstrap-editable.min.js'] = false;

			Yii::app()->clientScript->scriptMap['jquery.jqote2.min.js'] = false;

			Yii::app()->clientScript->scriptMap['jquery.ajax.cache.js'] = false;

			Yii::app()->clientScript->scriptMap[''] = false;

			Yii::app()->clientScript->scriptMap['jquery-ui-no-conflict.min.js'] = false;


The closest I’ve come to a solution is to is to reload the gridview via innerHtml to the div, however that breaks the gridview editable fields as the javascript does not reload.

The current code for the editable field in the detailview is

 array( 'name' => 'quickSetup',

	'editable' => array(

		'type'   => 'text',

		'success' => "js: function(data) {




Which returns -

Thanks in advance for any help you can offer.

Hi Fabiof

Updating gridviews without reloading the entire page can be a nightmare, because of javascript issues - as you said.

So what I do is to put the gridview in an iframe.

Then you update the gridview by reloading the iframe’s source: $(’#iframe’).attr(“src”, url);

The iframe ensures that the gridview’s javascript is kept separate from the rest of the page.

This is not perfect, but it works. Issues are the non-sharing of javascript - which can slow down the browser if multiple instances of a js file is constantly reloaded.

Other issues can occur if the code "inside" the iframe needs to communicate with code "outside" the iframe.

If you can sort out the javascript reloading issues without using an iframe, then please post your solution, since there are quite a few forum-topics trying to solve this. Also make sure the gridview can page, because many times the troubles only start after paging.