CGridView Jquery click won't fire after rows sorted

Hi,

I’m trying to created a gridview with some jquery functions.

I’ve ran into a bit of a problem when sorting the rows.

Here’s my grid:




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

	'id'=>'costs-grid',

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

	'filter'=>$costs,

	'htmlOptions'=>array('style'=>'cursor: pointer;'),

	'columns'=>array(

		array(

			'type'=>'image',

			'value'=>'"http://localhost/event_tracker/images/arrow.png"',

			'cssClassExpression'=>'"cost_details"',

			'htmlOptions'=>array('width'=>'10px', 'id'=>$model->id),

		),

		'description',

		'cost',

		array(

			'class'=>'CButtonColumn',

		),

	),

)); ?>



And here’s the jquery in the same view:




<?php

Yii::app()->clientScript->registerScript('detail_row', "

function detail_row(id){

	console.log(id);

}

$('.cost_details').click(function(){

	alert('steve');

});

");

?>



The issue i’ve running into is that the alert will fire fine if i don’t sort the grid, as soon as i sort the alert won’t fire.

I don’t show any errors in firebub(in firefox).

Any ideas/thought would be appreciate.

Thanks

Oliver

The grid gets updated by ajax when sorting, filtering and paging.

And an event handler attached to the element inside a grid … $(’.cost_details’) … will be lost when it is updated by an ajax call.

A simple solution is to use jQuery.on instead of jQuery.click.




$('#costs-grid').on('click', '.cost_details', function(event){

	alert('steve');

	event.preventDefault();

});



The event handler is attached to an ancestor element … $(’#costs-grid’) … so that it will keep working after an ajax update.

Thanks Softark! That worked.

Oliver

I apologize for bumping this old thread, but I cannot resolve this same issue. View file is below.

The button column is treated as a link after sorting and does not fire ajax.




<?php


if (Yii::app()->user->hasRole("Operations Director") || Yii::app()->user->hasRole("Executive Director")) {


	

	$edit = array('header' => 'Actions', 'htmlOptions' => array('nowrap' => 'nowrap'),

		'class' => 'booster.widgets.TbButtonColumn',

		

		'template' => '{check}{print_act}{delete}',

		'buttons' => array(

			'check' => array(

				'label' => 'Complete',

				'icon' => 'ok',

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

				'options' => array(

					'class' => 'btn btn-small for-complete',

					'style' => 'padding: 0px 8px',

				),

			),

			'print_act' => array(

				'label' => 'Print Packing List',

				'icon' => 'print',

				'url' => 'Yii::app()->createUrl("packinglistbuilder/output/excelAdd", array("id"=>$data->add))',

				'options' => array(

					'class' => 'btn btn-small',

					'target' => '_blank',

					'style' => 'padding: 0px 8px',

				),

			),


		),


	);

} else {

	$edit = array('header' => 'Actions', 'htmlOptions' => array('nowrap' => 'nowrap'),

		'class' => 'booster.widgets.TbButtonColumn',

		

		'template' => '{check}{print_act}{delete}',

		'buttons' => array(

			'check' => array(

				'label' => 'Complete',

				'icon' => 'ok',

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

				'cssClassExpression'=>'"cost_details"',

				'options' => array(

					'class' => 'btn btn-small for-complete',

					'style' => 'padding: 0px 8px',

				),

			),

			'print_act' => array(

				'label' => 'Print Packing List',

				'icon' => 'print',

				'url' => 'Yii::app()->createUrl("packinglistbuilder/output/excelAdd", array("id"=>$data->add))',

				'options' => array(

					'class' => 'btn btn-small',

					'target' => '_blank',

					'style' => 'padding: 0px 8px',

				),

			),


		),


	);

}


$gridColumns = array(

	

	array('name' => 'id'),

	array('name' => 'name', 'value' => '$data["name"]'),

	array('name' => 'season', 'value' => '$data["season"]'),

	array('name' => 'state', 'value' => '$data["state"]'),

	array('name' => 'pFirst', 'value' => '$data["pFirst"]'),

	array('name' => 'pLast', 'value' => '$data["pLast"]'),

	array('name' => 'ship1', 'value' => '$data["ship1"]', 'header' => 'Address'),

	array('name' => 'ship2', 'value' => '$data["ship2"] == "NO" ? NULL : $data["ship2"]', 'header' => 'Address 1'),

	array('name' => 'shipCity', 'value' => '$data["shipCity"]', 'header' => 'City'),

	array('name' => 'shipState', 'value' => '$data["shipState"]', 'header' => 'State'),

	array('name' => 'shipZip', 'value' => '$data["shipZip"]', 'header' => 'Zip'),


);

$gridColumns[] = $edit;


$this->widget(

	'booster.widgets.TbExtendedGridView',

	array(

		

		'type' => 'striped',

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

		

		'columns' => $gridColumns,

		'id' => 'add-grid',

		'selectableRows' => 2,

		'bulkActions' => array(

			'actionButtons' => array(

				array(

					'buttonType' => 'button',

					'context' => 'primary',

					'size' => 'small',

					'url' => Yii::app()->createUrl("packinglistbuilder/output/excelAdd"),

					'label' => 'Print Select Packing Lists',

					

					'click' => 'js:function(values){

				            			var url = $(this).attr(\'href\');

				            			$.each(values, function(index, value) {

 												window.open(\'/packinglistbuilder/output/excelAdd?id=\' + value)

				            				}

				            			);}',

					'id' => 'test_id',

					'htmlOptions' => array(

						'class' => 'bulk-action',

					),


				),

			),

			// if grid doesn't have a checkbox column type, it will attach

			// one and this configuration will be part of it

			'checkBoxColumnConfig' => array(

				'name' => 'add',

			),

		),

	)

);

?>

<?php Yii::app()->clientScript->registerScript('detail_row', "

    // as a global variable

    var gridId = 'add-grid';


    $(function(){

        // prevent the click event

        $(document).on('click','#add-grid a.bulk-action',function() {

            return false;

        });

    });


	$('#add-grid').on('click','.for-complete', function(event) {

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

       var url = $(this).attr('href');

        //  do your post request here

        $.post(url,function(res){

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

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

         });

        event.preventDefault();

        return false;

});"); ?>




Of course after days of looking at this and posting I found the solution.

Change


$('#add-grid').on('click','.for-complete', function(event) {

to


$(document).on('click','#add-grid a.for-complete', function(event) {