Cgridview And Ajax

Yii 1.1 General Discussion
1

Hi, I’m pretty new to Yii, comming from PRADO.

I’ve been trying to develop a CRUD application, and I’m using ajax modal popups to edit create/update the data.

Everything is working fine, except when a new record is added and the gridview is updated. Instead opening the popup do update the record, it gets redirected to the update url.

Well, I do think that the problem is caused when CGridView gets updated, and do not create the jquery handlers for the grid update/delete buttons.

The code I’m using:




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

		'id' => 'party-contact-grid',


...


		'columns'=>array(


...		      


				array

				(

						'class'=>'TbButtonColumn',

						'template'=>'{edit}{delete}',

						'buttons'=>array

						(

								'edit' => array

								(

										'icon'=>'edit',

										'label'=>'edit',

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

										'options' => array('ajax'=>array('type' => 'post', 'url'=>'js:$(this).attr("href")', 'success'=> 'function(data) { $("#party-contact-container").html(data); $("#party-contact-dialog").modal(); }'),)

										

										

								),

Thanks,

Jesse

2

Hi Jessé, welcome to the forum.

IMO, you would be better not use ajax something inside the grid, or javascripts inside an ajax updated region in general.

Instead, you could add an event handler manually outside the grid.

A good example is the jQuery code for delete button. Check the HTML output of the admin page, and you’ll notice that it doesn’t have scripts along with each buttons, but a general function to handle the event outside the grid, like this:




jQuery(document).on('click','#person-grid a.delete',function() {

	if(!confirm('Are you sure to delete this item?')) return false;

	var th = this,

		afterDelete = function(){};

	jQuery('#person-grid').yiiGridView('update', {

		type: 'POST',

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

		data:{ 'YII_CSRF_TOKEN':'8c43d80c87b55bb2ad9ef653d8f98290f7dea748' },

		success: function(data) {

			jQuery('#person-grid').yiiGridView('update');

			afterDelete(th, true, data);

		},

		error: function(XHR) {

			return afterDelete(th, false, XHR);

		}

	});

	return false;

});
3

Thanks, a lot. It works!

Jesse