dynamic "deleteconfirmation" in the CButtonColumn ?

mdomba · December 6, 2010, 10:23am

It is a bit complex, I know

$(this) - When a user "click" on the delete icon you get here the jQuery object of the clicked link

$(this).parent() - is the table column that contains the delete button

$(this).parent().parent() - is the row in which the delete button has been clicked

$(this).parent().parent().children() - gets all columns of the row where the delete icon has been clicked

$(this).parent().parent().children(’:first-child’) - gets the first column of the row where the delete icon has been clicked

$(this).parent().parent().children(’:first-child’).text() - gets the value of the first column

Note that text() is a jQuery function nor PHP… it gets the value of a jQuery object… in this case the content of the first column in a table row

karim.gioca · December 6, 2010, 11:02am

Thanx so much

It’s a greate solution and i appreciate your help . I have archived this solution as one of my ways of cheats

trejder · December 15, 2010, 12:36pm

I will only add that in this post you will find example, how to read contents of other column than first and use in in delete confirmation message box.

logos010 · December 23, 2010, 11:19am

I hvae same problem, but in my case, i use to update ajax function,

i tried to use

but it same not work in my code! I explain my problem better :




array(

                'class' => 'CButtonColumn',

                'header' => 'Actions',

                'template' => '{update}',

                'buttons' => array(

                    'update' => array(

                        'url' => '"#"',

                        'label' => 'Edit',

                        'click' => "alert(js:$(this).parent().parent().children(':nth-child(2)').text())"

                    ),

                ),

It just get error, i don’t know how to solve this problem, can anyone help me?

mdomba · December 23, 2010, 11:35am

NOTE: "js:" when used… should be used only used as a start of the string not inside the string…

‘click’ needs a callback function to be invoked… check this thread for an example - http://www.yiiframework.com/forum/index.php?/topic/14184-

re1nald0 · December 27, 2010, 8:25pm

Frankly speaking, I’m really confused about this

I would like to know how I can use this in ‘selectionChanged’. I have something like this:




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

	'id'=>'distributor-grid',

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

	'filter'=>$model,

	'selectionChanged'=>"function(id){

			window.opener.document.subcontractor.distributor_code.value = $(this).parent().parent().children(':nth-child(2)').text();

		}",	

	'selectableRows'=>1,

	'columns'=>array(

		array(

			'class'=>'CCheckBoxColumn',

		),

		'distributor_code',

		'name',

		'city',

	),

)); ?>

Could someone help?

Thank you.

mdomba · December 27, 2010, 8:32pm

@rei

Can you explain what you want to do?

For the explanation of the “complex” jQuery read the comment #6 on this thread… you will see that this line works only for a click on a button in the CButtonColumn… as you are using selectionChanged… you don’t know where the user has clicked as he can click anywhere on the row…

re1nald0 · December 28, 2010, 3:22am

Hi mdomba,

I’m so perplexed that I forgot to explain about that .

Basically, I want to pass the content of the second column (in the selected row) to textfield in another window.

So, when user checks the checkbox, the ‘distributor id’ column content (of the selected row) will be passed to distributor id textfield in another window.

re1nald0 · December 28, 2010, 3:28am

Anyway, thanks for your hint:

So I change it to:




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

	'id'=>'distributor-grid',

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

	'filter'=>$model,

	'selectableRows'=>1,

	'columns'=>array(

		array(

			'class'=>'CCheckBoxColumn',

			'checkBoxHtmlOptions'=>array('onclick'=>"window.opener.document.subcontractor.distributor_code.value = $(this).parent().parent().children(':nth-child(2)').text();")

		),

		'distributor_code',

		'name',

		'city',

	),

)); ?>

Now it works. Thanks again!

mdomba · December 28, 2010, 6:52am

Glad you solved it… but note that to select a row… you can click anywhere on the row… not only on the checkbox…

re1nald0 · December 28, 2010, 8:14am

Could that be achieved? I mean we click anywhere on row and get value from the second column of that row?

mdomba · December 28, 2010, 8:55am

Of course it can be done…

My way of doing it is by using pure jQuery… you register a script like this…




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

$('#document-grid table tbody tr').click(function()

{

	$('#dc').val($(this).children(':nth-child(2)').text());

});

");

where "document-grid" is the ID of the CGridView and "dc" is the ID of the textfield

Example textfield :




echo CHtml::textField('distributor_code',$distributor_code,array('id'=>'dc'));

This way in the click event function $(this) is always the current row… and we just need the 2nd child of that row…

re1nald0 · December 28, 2010, 1:09pm

Wow! Looks very cool. Thanks a million for giving a detailed example, mdomba.

Edit: It works when page loads for the first time. Anyway, I notice that this event is not triggered after I do some filtering (search function) in CGridView. Any idea?

re1nald0 · December 28, 2010, 3:23pm

Is it possible to have conflict with the ‘search’ script?




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

$('.search-button').click(function(){

	$('.search-form').toggle();

	return false;

});

$('.search-form form').submit(function(){

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

		data: $(this).serialize()

	});

	

	return false;

});

");

Since that script works fine before I do filtering…

mdomba · December 28, 2010, 3:55pm

It’s becasue after an ajax call (sort/pagination/filtering) the gridview/listview gets reloaded…

I cannot test it right now… Try to use live or delegate instead of ".click"

example:




$('.search-button').live('click', function(){

        $('.search-form').toggle();

        return false;

});

re1nald0 · December 28, 2010, 5:07pm

Works perfectly with ‘live’. Thank you.

BillyRayPreachersSon · February 22, 2011, 6:49pm

Instead of multiple calls to parent(), you can also make a single call to parents(), passing ‘tr’ as the selector, so instead of this, which would take the text from the 4th column of the table (the :eq selector uses 0-based numbering):


'deleteConfirmation'=>"js:'Are you sure you want to delete the user ' +

	$(this).parent().parent().children(':eq(3)').text() +

	'? This operation cannot be undone.\\n\\nPress \"OK\" to delete, or \"Cancel\" to abort without deleting.\\n\\n'",

You could use this:


'deleteConfirmation'=>"js:'Are you sure you want to delete the user ' +

	$(this).parents('tr').children(':eq(3)').text() +

	'? This operation cannot be undone.\\n\\nPress \"OK\" to delete, or \"Cancel\" to abort without deleting.\\n\\n'",

Dan

trejder · March 15, 2011, 7:37am

Will it also be problem, if all AJAX calls of CGridView (sorting, pagination) will be changed to normal POST calls?

I mean - is it truly only a problem of reloading CGridView after AJAX call or maybe this little trick interference somehow, how CGridView works at all?

mdomba · March 15, 2011, 7:49am

"problem" is only on ajax calls… becasue the ajax call loads a completely new grid and replaces the current one…

if you use POST or GET (without ajax)… then a completely new page is loaded… new jQuery events are rendered/attached and all is working

but if you use ajax… the new page/sort/whatever is returned from the ajax call… and with jQuery the current page grid is replaced by the returned grid… so everything on the current page remains as is… only the grid is replaced… no new events are binded or new jQuery code is rendered… there is only the old one…

if you use the classic jQuery.click(…) method… it does work only on the original grid… that’s why it does not work after that original grid is replaced by a new one…

but as per jQuery documentation… live() and delegate() works even for future elements… so if you use live()… it will work even after the grid has being replaced by a new one…

I hope it’s more clear now…

if not… there is no other way then get your hands a bit dirty with jQuery… without Yii… just HTML and jQuery… and experiment a bit… read some books on it…

zaccaria · March 15, 2011, 10:33am

Well, said like that sounds a bit rough, but I quote Mdomba 100%.

Anyone should understand that zii widget are just widget for your confort, are not the solution of all problems. The fact that Yii supplies powerfull widget does’t mean that is possible to run a site with lot of nice 2.0 stuff without knowing jquery.

Yii is a php framework, all ajax cute feature are just a plus, if some jquery feature is not available in Yii is not a Yii bug.