Cgridview Ccheckbox Ajax Update Onchange

Yii 1.1 General Discussion
1

Hi everyone,

I have a table with parent and child like this :

Item

id

name

parentId

An item can attach one or more Item.

So when a user click on a Item he reach the view page of that item with a CGridview of every ITEMs he can attach to it.

For that I planned to have a onchange on the CCheckbox.

Here the code I develop from now :




<?php

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

        'dataProvider'=>$search->search(array('condition'=>"t.id NOT IN ($model->notIn) and (parentId = $model->id OR parentId IS NULL)")),

           'id'=>'item-grid',

           'selectableRows'=>2,

           'selectionChanged'=>'attach',

           'filter'=>$search,

           'columns'=>array(

               array(

                   'class'=>'CCheckBoxColumn',

                   'id'=>'chk',

                   'checked'=>'$data->parentId',

                   'headerTemplate' => '',

               ),

               'name',

           )

    ));?>







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

// HERE THE CODE <img src='http://www.yiiframework.com/forum/public/style_emoticons/default/huh.gif' class='bbc_emoticon' alt='???' /> 

");

Thanks for help

2

No one could help for this little problem, should not be difficult to resolve.

I tried this but $data->id is not working, it post the string "$data->id"




<?php

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

        'dataProvider'=>$search->search(array('condition'=>"t.id NOT IN ($model->notIn) and (parentId = $model->id OR parentId IS NULL)")),

           'id'=>'item-grid',

           'selectableRows'=>0,

           'filter'=>$search,

           'columns'=>array(

               array(

                   'class'=>'CCheckBoxColumn',

                   'id'=>'chk',

                   'checked'=>'$data->parentId',

                   'headerTemplate'=>'',

                   'selectableRows'=>2,

                   'checkBoxHtmlOptions' => array( "ajax" => 

                                                array("type"=>"POST", 

                                                       "url"=>"$model->id",

                                                        "data"=>'$data->id',  //NOT WORKING

                                                        )),

               ),

               'name',

           )

    ));?>

Thanks for help

3

try


"id" => "{$data["id"]}"
4

EDIT :: I replace




'checkBoxHtmlOptions' => array( "ajax" => 

           array("type"=>"POST", 

            "url"=>"$model->id",

            "data"=>'$data->id',  //NOT WORKING

 )),

by




'checkBoxHtmlOptions' => array( "ajax" => 

           array("type"=>"POST", 

           "url"=>"$model->id",

           "data"=>array('itemId'=>'js: $(this).val()'), 

           "success"=>'window.location.reload(true)', // UGLY CODE

)),

Problem, if I don’t add success => window.location.reload(true) the checkbox doesn’t change ???

Thanks for help

5

write a


"success" => "function(data){

                	window.location.reload(true);

             }",
6 

Problem, if I don't add success => window.location.reload(true) the checkbox doesn't change

It’s very likely that the javascript/jquery code you are applying to that checkbox is stopping the default action (check/uncheck) of that checkbox.

You are using CCheckboxColumn for a purpose for which it wasn’t designed to work with gridview hence the problems you are having. Checkboxes are for selection/de-selection, not submitting data. It is possible to do what you are trying to do but it’s a bit more work.

Is there any reason why you can’t use a link?

  • Have an ajaxLink at the bottom of your grid-view

  • After the user selects the rows, they click on the link.

  • The link collects the ids of the selected rows using $.fn.yiiGridView.getChecked(containerID,columnID) (see selectableRows documentation and passes it to your controller.

  • See this possible solution on StackOverflow

7

Because is more dynamic :)

Suppose you select some items on page 1 some on page 2 and one item on page 3.

When you click on submit button, it will save only the selection of the last page isn’t it ?

Thanks to help me to write a better code

8

I’m a lazy programmer ;D

To answer your original question about the checkbox, if the request is successful, can’t you set the checkbox (checked/unchecked) at that point? There’ll then be no need to reload. Something like so:




$(document).ready(function(){

	$(".select-on-check").click(function(e){

	var $chkRow = $(this);

	

	$.ajax({

    	 type: "POST",

     	url: "<?php echo Yii::app()->createUrl('yourcontroller/youraction')?>",

      	data: "itemId="+$chkRow.val() ,

      	success: function(){ 

      	if($chkRow.is(':checked'))

            $chkRow.prop("checked", false);

       	else

            $chkRow.prop("checked", true);

       	},


        });


return false;

});

	

});

I haven’t tested the code but this should give you an idea. You could register it using clientScript.

9

Hi, thanks it works great without checking if is checked or not, but, because we have a HUGE but, the ajax code only work if only one page, when I change the page, the code doesn’t work at all ??

here ajax code :




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

$(':checkbox').change(function(){

    id = $(this).val();

    $.ajax({

        url: '$model->id',

        type: 'POST',

        data: 'equipmentId='+id,

    });

});

");

EDIT : To avoid this problem I disabled the pagination and set the paginationSize to $model->size(), it resolve the problem :)

10

Another problem here my CGridView :




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

$(':checkbox').change(function(){

    id = $(this).val();

    $.ajax({

        url: '$model->id',

        type: 'POST',

        data: 'equipmentId='+id,

    });

});

");


?>


<h1><?php echo Yii::t('default','Attach Equipments')?></h1>


    

    <?php

    $projectId = $model->component->projectId;

    $data = $search->search(array('condition'=>"t.id NOT IN ($model->notIn) AND componentId IN ($model->inProject) and (parentId = $model->id OR parentId IS NULL)"));

    $data->pagination->pageSize = $model->count();

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

        'dataProvider'=>$data,

           'id'=>'equipment-grid',

           'selectableRows'=>2,

           'enablePagination' => false,

           'filter'=>$search,

           'columns'=>array(

               array(

                   'class'=>'CCheckBoxColumn',

                   'id'=>'chk',

                   'checked'=>'$data->parentId',

                   'headerTemplate'=>''

               ),

               array(

                 'name' => 'componentId',

                'filter' => CHtml::listData(Components::model()->findAll("projectId = $projectId"), 'id', 'name'),

                'value' => 'Components::Model()->FindByPk($data->componentId)->name',  

               ),

               'identifier',

               'description',

           )

    ));?>

When I click on the checkbox is working, but if I click on the row it check the checkbox but the ajax method isn’t call why ? How could I call my ajax method when the row is selected or deselected ?

Thanks

11

Hi

It’s a well known problem. I used Zaccaria’s solution a while back and it worked for me. There’s another solution here that you could try.

I would suggest that you create a new topic for the new problem (it’s a different problem) so it’s easy for others to find.