jeditable in CGridView

Yii 1.1 General Discussion
1

Hello,

I have integrated JEditable (jQuery Plugin) with CGridView but i am facing a problem. The jeditable works fine on first page of grid but when i move to next pages(i.e the grid reloads itself), the jeditable doesn’t work as the new data is not bound with the jeditable. I am binding the grid data on document.ready

Any ideas what should i do?

2

The same problem i was presented, but after much research, i decided to take a deep breath, step back and rethink the question, and voila!, the answer may be simpler than expected. I’ve solved with the method .live() in jQuery, which events propagating existing and future… That sounds complex, go to the code:





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


    $('.editable_json').live('click', function () {

        $(this).editable('".CController::createUrl('informes/changeData')."', {

            indicator : '<img src=\"images/indicator.gif\">',

            loadurl : '".CController::createUrl('informes/jsonData')."',

            type   : 'select',

            submit : 'OK',

            style  : 'inherit'

        });

    });


");

Yii registerScript: Yii::app()->clientScript->registerScript(‘editable’, "…

Within this: $(’.editable_json’).live(‘click’, function () {… embedded code .jeditable.

Thus the event .jeditable spreads and maintained even after an interaction ajax with cGridview.

I hope this is helpful to whoever may need. ;)

3

Maybe it is possible when using this script in the property afterAjaxUpdate.

4

Yes Mahdi i try, but in my case i have more than two fields that could edit. by the way, how i can use afterAjaxUpdate for multiple cases?, example here:





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

	'id'=>'informes-grid',

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

	'filter'=>$model,

        'afterAjaxUpdate'=>"function(){

            jQuery('#".CHtml::activeId($model, 'f_inspeccion_actual')."').datepicker(".CJSON::encode($model->datepickerOptions()).")}",

            'afterAjaxUpdate'=>'function(){

		jQuery("#'.CHtml::activeId($model, 'f_inspeccion_actual').'").datepicker('.CJSON::encode($model->datepickerOptions()).');

		$.datepicker.setDefaults($.datepicker.regional["es"]);

	}',


	'columns'=>array(

           ...

If i want to use the snippet of jeditable, where i can put, it and how?

thanks.

5

I didn’t thank you… how rude of me :unsure:

Thank you artjc :) . Using live solved the issue I was facing.

6

Hi Artjc,

Thanks for the pointer on live() - this gets part of the way but when using .live() it suppresses the first ‘click’ and it is the second click that makes the field editable. In case it was a table row click issue (multiple events as a clicking a row highlights it) I added a jeditable field outside the CGridView but still have the ‘first click suppressed’ problem.

Interestingly (and perhaps key to the solution) if I use this as the reference the first click is suppressed for every individual editable_json class field (need to click twice to enter field A and then twice to enter edit for field B, but if I use ‘editable_json’ the first click is only suppressed once (need 2 clicks to enter field A, but after that field B can be entered via a single click - appears to ‘remember’ the first click across the class.

With this: Need to click twice for EVERY editable_json class field to enter jeditable edit:




    $('.editable_json').live('click', function () {

        $(this).editable('".CController::createUrl('informes/changeData')."', {

With ‘.editable_json’: Need to click twice for FIRST editable_json class field only to enter jeditable edit:




    $('.editable_json').live('click', function () {

        $('.editable_json').editable('".CController::createUrl('informes/changeData')."', {

Any ideas?

7

This is the solution I found which works for me so far Click here