CGridView CbutonColumn Custom Button Click not working

Question

I am using a CGridView in which I have a CButtonColumn for which I have defined a button. the "click" js is not being called. The URL is called though and completes. I want to show a confirmation to the user but it never shows up. According to the documentation 'click' is a JS function to be called upon click but it is not working for me.

$this->widget('zii.widgets.grid.CGridView', array(
            'dataProvider'=>$model->search(),
            'filter'=>$model,
            'columns'=>array(
                    'id',
                    'name',
                    'question',
                    'created',                      
                    array(
                            'class'=>'CButtonColumn',
                            'header'=>'Reset',
                            'template'=>'{reset}',
                            'buttons'=>array(
                                    'reset'=>array(
                                            'label'=>'Reset',
                                            'click'=>'function(){alert("Are you sure?");}',
                                            'imageUrl'=>Yii::app()->request->baseUrl.'/images/reset.png',
                                            'url'=>'Yii::app()->createUrl("favs/reset", array("id"=>$data->id))',                                           
                                            'options'=>array(
                                                    'ajax'=>array(
                                                            'type'=>'POST',
                                                            'url'=>"js:$(this).attr('href')",                                                               
                                                    ),
                                            ),
                                    ),
                            ),                      
                    ),                      
            ),
    ));

bool.dev · Accepted Answer · 2012-02-29T12:56:30.053

1

This has something to do with the jQuery generated by Yii for your code:

jQuery('#your-grid-id a.reset').live('click',function(){alert("Are you sure?");});
/* more jquery ... 
... 
...
*/
jQuery('body').undelegate('#yt1','click').delegate('#yt1','click',function(){jQuery.ajax({'type':'GET','url':$(this).attr('href'),'cache':false,'data':jQuery(this).parents("form").serialize()});return false;});
// similar jquery follows for the other rows of the grid view

As you can see, the <a> tag's click event handler is first the alert function you provide, using the click option.
Then later this click event handler is removed using undelegate, and another handler is added using delegate, this is happening because you have added the ajax option.
If you remove the ajax option you will see the dialog box, and you'll see that undelegate...delegate sequence is removed from the generated code.

To achieve your functionality you can do something else:

Use the beforeSend option of jquery's ajax to show the confirmation dialog, alert is not confirmation, btw.
Use the success option of jquery's ajax to update your view, or show message to user that reset is done.

edited Feb 29 '12 at 12:56

answered Feb 28 '12 at 15:00

bool.dev

17,508
5
69
93

hope this helps..lemme know if you need more clarifications – bool.dev Feb 28 '12 at 15:05
1

spot on. Thanks. As for alert I was getting desperate to fix it so added the most simple js function I could think off. On a different note do you use something in particular to debug jquery js rather than just reading source or firebug. – Orlymee Feb 28 '12 at 15:08
ok, thank god you were using alert only in the example. Actually i don't work on client side much, so i don't know about many of the tools, firebug works for me most of the time. if i ever come across anything, and if i remember, be sure that i'll message u. – bool.dev Feb 28 '12 at 15:19
1

About debugging jquery, i just came across the [javascript tool list in MDN](https://developer.mozilla.org/Special:Tags?tag=JavaScript:Tools&language=en), have a look, it could help. There's also the ever helpful `console.log()`, very valuable in debugging. like above you could have used `console.log("in are you sure");`, instead of alert. – bool.dev Jul 24 '12 at 08:29

CGridView CbutonColumn Custom Button Click not working

1 Answers1