How to create an ajax button in CGridview?

Yii 1.1 General Discussion
1

Hi there! I m having trouble with creating an ajax button in CGridView. I need a button that can use ajax to execute an action and update the gridview. It s like Delete button. Please help!

2

There are several other posts on the forum that answer this question in more depth than I can if you search for a while. EG here.

I’ve struggled with this myself. All the answers I found were not ideal. You can do it using the button column, but it creates problems with paging and other CGridView features that involve ajax. I found it easier to just create a separate column and put some ajax buttons in it. eg:




array(

	'header'=>'Actions',

	'type'=>'raw',

	'value'=>'CHtml::ajaxLink(CHtml::image("' . Yii::app()->request->baseUrl . '/path/to/icon.png", "Delete", array("title"=>"Delete","class"=>"grid_icon")), Yii::app()->createUrl("controller/ajaxDelete"), array("type"=>"POST", "data"=>array("id"=>$data->id, "action"=>"delete"), "success"=>"jsDelete"), array("onclick"=>"$(\'.grid-view\').addClass(\'grid-view-loading\')", "class"=>"delete", "confirm"=>"Are you sure?\r\nDrafts are permanently deleted and are not recoverable.") )',

),

Yep, all that code is embedded in a string.

The ajax links to controller/ajaxDelete which returns some JSON with the callback, the call back then makes any changes needed to the form. Don’t forget to


	$('.grid-view').removeClass('grid-view-loading');

in the callback to turn off the ajax loading graphic.

Also, make sure you use POST for content changing requests to prevent cross site forgery requests

This solution is not ideal because it creates JQuery for every line of table, rather than a single bit of code to handle all cases.

3

Does this help:

http://www.yiiframework.com/forum/index.php?/topic/10639-solved-ajax-update-in-cgridview/page__p__52272__fromsearch__1#entry52272

Also I would welcome any improvements to that code!

4

Ok. Thank you! I will try to use and improve the codes you give

5

hi friends you can create ajax button in your grid view like

				'buttons'=>array(


							'Update' =>array(


									'imageUrl'=>Yii::app()->request->baseUrl.'/images/up.png',


									'url'=>'Yii::app()->createUrl("user/update",  array("id"=>$data->id) )',





									'click'=>"function() {


									if(!confirm('Update ?')) return false;


									$.fn.yiiGridView.update('user-grid', {


									type:'POST',


									url:$(this).attr('href'),


									success:function(text,status) {


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

}

});

									return false;

}",

							),

),

it works fine for me.