Cgrid View with CCheckBoxColumn + renderpartial and checkboxes are not checked

i have a Cgrid view Which i am showing with ajax call and with the help of renderPartial view

In this Cgrid view i have a CCheckBoxColumn.

my whole application is running with Ajax calls and renderPartial views.So, When call ajax for first time and load a renderPartial view then perform a selection of checkboxes and hit a ajax Button for any other ajax call(Delete a multiple records) then it render a same Cgrid view with a updated results.

But then i try to select a checkboxes then only a main CheckBox(Which perform select All checkbox) is working like checked All or unchecked All.But child check boxes are not selectable individually.

I have a one more button which peform a Add record Ajax call which load a CActivForm to add a record.So,After Adding a record it again load that View which contain a Gird View with CCheckBoxColumn.So, when i try to select an individual checkbox then its not working.Only select All or unselect All action can be performed. :(

I know it is just an issue of redundancy of scripts.But i have already tired with




Yii::app()->clientScript->scriptMap=array("jquery.js"=>false, 'duplicatedScrip.js'=>false)



But its not working for me.

Here is my code

For Controller :-




	public function actionChangeDropdownView($dropdown){


		switch ($dropdown){

			case 'state':

				if(Yii::app()->request->isAjaxRequest)

				{

					Yii::app()->clientscript->scriptMap=array("jquery.js"=>false, 'duplicatedScrip.js'=>false);

				}

				$dataProvider=new CActiveDataProvider('State', array(

                               'pagination'=>array(

                               'pageSize'=>15,

				)));

				$this->renderPartial('_loadstate',array('dataProvider'=>$dataProvider),false,true);

				break;

			case 'costUnit':

				if(Yii::app()->request->isAjaxRequest)

				{

					Yii::app()->clientscript->scriptMap=array("jquery.js"=>false, 'duplicatedScrip.js'=>false);

				}

				$dataProvider=new CActiveDataProvider('Unit', array(

                               'pagination'=>array(

                               'pageSize'=>15,

				)));

				$this->renderPartial('_loadunit',array('dataProvider'=>$dataProvider),false,true);

				break;

			case 'industry':

				if(Yii::app()->request->isAjaxRequest)

				{

					Yii::app()->clientscript->scriptMap=array("jquery.js"=>false, 'duplicatedScrip.js'=>false);

				}

				$dataProvider=new CActiveDataProvider('Industry', array(

                               'pagination'=>array(

                               'pageSize'=>15,

				)));

				$this->renderPartial('_loadindustry',array('dataProvider'=>$dataProvider),false,true);

				break;

		}

	}


public function actionAddStateProcess(){


		$model= new State('addState');

		$model->scenario='addState';


		if(isset($_POST['State']))

		{

			$model->attributes=$_POST['State'];

			$model->save();

		}


		if(Yii::app()->request->isAjaxRequest)

		{

			Yii::app()->clientscript->scriptMap=array("jquery.js"=>false, 'duplicatedScrip.js'=>false);

		}


		$dataProvider=new CActiveDataProvider('State', array(

                                'pagination'=>array(

                                'pageSize'=>15,

		//'params' => array('city' => $cityId,'sortby'=>$sortBy),

		)));

		$this->renderPartial('_loadstate',array('dataProvider'=>$dataProvider),false,true);

	}




For View File :-




	echo CHtml::beginForm('','post',array('id'=>'state-list-form'));

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

					    'dataProvider'=>$dataProvider,

					    'id'=>'stateGird',

					    'selectableRows'=>2, // multiple rows can be selected

					    'columns'=>array(

					        array(

					            'class'=>'CCheckBoxColumn',

					            'id'=>'checkState',

					        ),

					      //  'id',

					        'state_name',

					        /*

					         *  array(            // display a column with "view", "update" and "delete" buttons

					            'class'=>'CButtonColumn',

					           // 'template'=>'{delete}',

					        ),

					         */

					    ),

					));

					echo CHtml::endForm();



I hope somebody will provide a stable solution for it.Its a wired problem for me.

Waiting for some good suggestion.

Thanks in Advance

jayant

Did you add an event handler to the click event of checkboxes?

[EDIT]

Wow, it’s a Portuguese form, jayant.

Well, if you have attached a click handler to the checkboxes, and if you are using jQuery.click for it, I would suggest you to use jQuery.on instead.

Hey softark,

Thanks for your reply.Could you please show me with a code what you are trying to say. Since, i have not added a event handler for checkboxex yet and i think its not required here.Since i am not doing anything on the click of checkbox selection here.I am performing a Ajax calls on Button click in the view.

Let me share you with my code here so that you can get a better Id.




_LoadState View file which i am rendering with Ajax Call


          <div id="tabs-1">

			    <!--top text section start-->

			    <div class="SectionTop">System Management > Manage Drop-Downs > Manage States</div>

			    <!--top text section end -->

			    <!--middle section start -->

			    <div class="SectionMiddle">

			      <div class="FormLeftSpace">

                    <div id="DropdownSection" >

                     <?php 

					/*

					 * if(!empty($listState)){

						foreach ($listState as $key=>$value):

							echo "$key State Name:- $value";

							echo "<br/>";

						endforeach;

					}else{

						echo "There is No State Added Yet";

					}

					 */

                     

					echo CHtml::beginForm('','post',array('id'=>'state-list-form'));

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

					    'dataProvider'=>$dataProvider,

					    'id'=>'stateGird',

					    'selectableRows'=>2, // multiple rows can be selected

					    'columns'=>array(

					        array(

					            'class'=>'CCheckBoxColumn',

					            'id'=>'chk',

					        ),

					      //  'id',

					        'state_name',

					        /*

					         *  array(            // display a column with "view", "update" and "delete" buttons

					            'class'=>'CButtonColumn',

					           // 'template'=>'{delete}',

					        ),

					         */

					    ),

					));

					echo CHtml::endForm();

					?>

                    </div>

			      </div>

			    </div>

			    <!--middle section end-->

			    <!--Bottom section start-->

			    <div class="SectionBottom">

			      <div class="right_bottom_links">

			        <div class="ButtonRightSiftNW">

			          <div class="clear_butNew">

			          <?php echo CHtml::button('Remove',array('class'=>'cancel','id'=>'deleteState'));?>

			           </div>

			          <div class="NextButton"> <?php echo CHtml::button('Add',array('id'=>'loadAddState','class'=>'button'));?> </div>

			        </div>

			      </div>

			    </div>

          </div>






Add State form view file 


          <div id="tabs-1">

          		<?php $form=$this->beginWidget('CActiveForm', array(

					'id'=>'add-state-form',

				    'enableAjaxValidation'=>false, 'stateful'=>true, 'htmlOptions'=>array('enctype' => 'multipart/form-data'),

				 ));

				 ?>

			    <!--top text section start-->

			    <div class="SectionTop">System Management > Manage Drop-Downs >Add State</div>

			    <!--top text section end -->

			    <!--middle section start -->

			    <div class="SectionMiddle">

			      <div class="FormLeftSpace">

			        <div class="Space">&nbsp;</div>

	                <div class="Space">&nbsp;</div>

	                <div class="Space">&nbsp;</div>

	                <div class="text_field_bx"> </div>

                	  <div class="text_field_bx">

			          <label>State Name :</label>

			          <span> 

			          <?php echo $form->textField($model,'state_name',array('class'=>'role_input')); ?>

			           </span> 

			         </div>

			      </div>

			    </div>

			    <!--middle section end-->

			    <!--Bottom section start-->

			    <div class="SectionBottom">

			      <div class="right_bottom_links">

			        <div class="ButtonRightSiftNW">

			          <div class="clear_butNew"><?php echo CHtml::resetButton('Clear',array('class'=>'cancel'));?> </div>

			          <div class="NextButton"> <?php echo CHtml::button('Add',array('id'=>'addState','class'=>'button'));?> </div>

			        </div>

			      </div>

			    </div>

			    

			       <?php $this->endWidget(); //End of Form for Add Team task ?>

          </div>






Controller Action 


	public function actionChangeDropdownView($dropdown){


		switch ($dropdown){

			case 'state':

				Yii::app()->clientscript->scriptMap['jquery.js'] = false;

				$dataProvider=new CActiveDataProvider('State', array(

                               'pagination'=>array(

                               'pageSize'=>15,

				)));

				$this->renderPartial('_loadstate',array('dataProvider'=>$dataProvider),false,true);

				break;

			case 'costUnit':

				Yii::app()->clientscript->scriptMap['jquery.js'] = false;

				$dataProvider=new CActiveDataProvider('Unit', array(

                               'pagination'=>array(

                               'pageSize'=>15,

				)));

				$this->renderPartial('_loadunit',array('dataProvider'=>$dataProvider),false,true);

				break;

			case 'industry':

				Yii::app()->clientscript->scriptMap['jquery.js'] = false;

				$dataProvider=new CActiveDataProvider('Industry', array(

                               'pagination'=>array(

                               'pageSize'=>15,

				)));

				$this->renderPartial('_loadindustry',array('dataProvider'=>$dataProvider),false,true);

				break;

		}

	}


	public function actionAddState(){


		$model= new State('addState');

		$this->renderPartial('addState',array('model'=>$model));

	}


	public function actionAddStateProcess(){


		$model= new State('addState');

		$model->scenario='addState';


		if(isset($_POST['State']))

		{

			$model->attributes=$_POST['State'];

			$model->save();

		}


		Yii::app()->clientscript->scriptMap['jquery.js'] = false;


		$dataProvider=new CActiveDataProvider('State', array(

                                'pagination'=>array(

                                'pageSize'=>15,

		//'params' => array('city' => $cityId,'sortby'=>$sortBy),

		)));

		$this->renderPartial('_loadstate',array('dataProvider'=>$dataProvider),false,true);

	}


public function actionDeleteState($records){

		State::model()->deleteAll(array('condition'=>"id IN($records)"));

	}






Jquery Code 


	   $('body').on('click','#loadAddState',function(){

		   $('#right_section').html('<div style="margin:115px auto; width:100px;height:100px;"><img src ="'+imagePath+'ajax-loader2.gif"></div>');

		   $.ajax({

     			  url:httpPath+"system/addState",

     			 // async: false,

     			  cache: false,

     			  dataType:'html',

     	        success:function(data){

     					if (data != "") {

     					    $('#right_section').html(data);	

     					    $('#tabs').tabs();

     					}

     				}

     			});

	   });//End of Code for load Add State Form

	   

	   $('body').on('click','#addState',function(){

		 

		   var error="<b>Please Fix Below Given Error:-</b><br>";

		   var stateName=$('#State_state_name').val();

		   var addStateForm = $("#add-state-form").serialize();

		   

			  if(stateName==''){

				  error+="-State Name is required field <br>";

			  }

		   

		   if(error!="" && error!='<b>Please Fix Below Given Error:-</b><br>'){

			   openPopup();//Open a popup to Display Errors

			   $('#errorContent').html(error);

		  }else{

			  $('#right_section').html('<div style="margin:115px auto; width:100px;height:100px;"><img src ="'+imagePath+'ajax-loader2.gif"></div>');

			  $.ajax({

				  type: "POST",

	    		  url: httpPath+"system/addStateProcess",

	              data: addStateForm,

     			 // async: false,

     			  cache: false,

     			  dataType:'html',

     	        success:function(data){

     					if (data != "") {

     					    $('#right_section').html(data);	

     					    $('#tabs').tabs();

     					}

     				}

     			});

		  }

		   

		  

	   });//End of Code for Add State

	   

$('body').on('click','#deleteState',function(){

		   var sel_row=$.fn.yiiGridView.getSelection('stateGird');

		   var error="<b>Please Fix Below Given Error:-</b><br>";

		   if(sel_row==''){

			   error+="-Please Select Records to Perform This action.<br>";

		   }

		   

		   if(error!="" && error!='<b>Please Fix Below Given Error:-</b><br>'){

			   openPopup();//Open a popup to Display Errors

			   $('#errorContent').html(error);

		  }else{

			 // $('#right_section').html('<div style="margin:115px auto; width:100px;height:100px;"><img src ="'+imagePath+'ajax-loader2.gif"></div>');

			  $.ajax({

	    		  url: httpPath+"system/deleteState&records="+sel_row,

     			  cache: false,

     			  dataType:'html',

	     	         success:function(){

	     					/*

	     					 * if (data != "") {

	     					    $('#right_section').html(data);	

	     					   $('#tabs').tabs();

	     					}

	     					 */

	     					$.fn.yiiGridView.update('stateGird');

	     			}

	     	       

     			});

		  }

	   }); // End of code to delete States




I hope now you can understand well about the situation.So, My issues here is :-

When i am rendering a view which contain a Cgridview with CCheckboxcolumn then child checboxes of Cgrid view are not checked.Like when i click on Add Button then a Add Form is render in a view then after Add a state it again render a Cgrid view.which contain a updated list of States in a Cgrid View.Then a problem raise here.I AM NOT ABLE TO SELECT A CHECKBOXES EXCEPT CHECKED/UNCHECKED All Feature from Cgrid View.

I hope i have explain my problem here in a depth now.So you can suggest me something good solution here.

Thanks again.

Ahh Sorry that is mistakenly created in this forum.:P i want to move it in General Discussion Forum.Do you have any idea how can i move it to General Discussion Forum.Or i have to request to mdomba to shift this Post.

I see.

I’m sorry I was in a wrong guess that you have added an event handler to the checkboxes. Something like:




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

    ...

});



As you know, this code may work for the first time the page has been loaded, but won’t work after the grid is updated by an ajax call. We should write like the following:




$('body').on('click', '.check_box_class', function(){

    ...

});



I’m sure that you already know that. :)

Well, then, what would be the problem … I don’t have any clear idea.

One thing I can think of is a mismatching of html tags … an opening tag without the corresponding closing tag, or a closing tag without the opening tag.

The grid might not be properly enclosed in a form.

Yes i know about it very well :) And i am quite sure that Grid is closed properly in form.But it would be great if you can use my shared source code and try it once at your end.Then you can see the exact problem.

I’ll check again the source code here.So, Might be this is an issue for ID’s mismatching in Js file So. i’ll spend some more time with it…then get back to you.:)

thanks again for your response.

I’ve noticed that a CCheckBoxColumn will add a few lines of script to the html output.

They will be different depending on the ‘selectableRows’ property of the CCheckBoxColumn.

(If it is not defined, then ‘selectableRows’ property of the parent grid is referred.)




// selectableRows : 0

$("input[name='stateGrid_c1\[\]']").live('click', function() {

	return false;

});


// selectableRows : 1

$("input[name='stateGrid_c1\[\]']").live('click', function() {

	$("input:not(#"+this.id+")[name='chk\[\]']").prop('checked',false);

});


// selectableRows : 2

$('#stateGrid_c1_all').live('click',function() {

	var checked=this.checked;

	$("input[name='stateGrid_c1\[\]']").each(function() {this.checked=checked;});

});

$("input[name='stateGrid_c1\[\]']").live('click', function() {

	$('#stateGrid_c1_all').prop('checked', $("input[name='stateGrid_c1\[\]']").length==$("input[name='stateGrid_c1\[\]']:checked").length);

});



In your case they should look like the one for ‘selectableRows : 2’.

“Check/uncheck all” functionality is working fine, but the checkboxes in the rows behave as if ‘selectableRow’ were 0.

Checking the actual scripts of your page before and after the ajax call with firebug (or any alternative) might give some hint.

[color="#008000"]NOTE: moved to General Discussion for 1.1.x as requested[/color]

Thank a lot softark. Yes you are saying exactly right.I hope you will figure it out very soon.This is something kind of script over writing issue.I have spent my two days with it but still not come up with the solution.And please also share your debuging method if you got any result for it.SO, that i can also check that what a wrong this i am doing here to figure out the problem. :)

Thanks again and waiting for your response.

jayant

Oh, I don’t want to take away the great joy of debugging from you. :D

Joking aside, I don’t think I can proceed any further. It seems rather a complicated problem that only the developer himself/herself or the co-workers can solve. I mean it will require the full access to the source code as a whole, and it will cost considerable time and effort.

If I were in your place, I would start debugging by checking the html output (including the inline scripts with it) of the ajax response.




    // $this->renderPartial('_loadstate',array('dataProvider'=>$dataProvider),false,true);

    $output = $this->renderPartial('_loadstate',array('dataProvider'=>$dataProvider),true,true);

    Yii::trace($output);

    echo $output;






    success:function(data){

        console.log(data);

        if (data != "") {

            ...



And, as I have said, I would check the html and the inline scripts before and after the ajax call with the developer’s tool of my browser.

Thanks softark for your help. I can also understand your concern here. This my issues and i have to solve it.But that your guidance help me a lot.So, thanks again for it :)

You know what now i am facing some interesting situation here.Everything is working fine on my localhost but its not working on my server :(

That is heights of my bad luck.And i have to face it. :( :(

I’m glad to hear that.

BTW, what was the cause of the problem?

Please share your experience with us once you have got time to do that. :)

Oh, another one. But I know you will solve it. :D