renderPartial + AJAX + CGridView

http://www.yiiframework.com/forum/index.php?/topic/10254-ajaxlinks-with-renderpartial/page__p__50394__fromsearch__1&#entry50394

I have read link above.

I have tried used it, and it’s worked => So i can include registerScript( JQuery ) in the renderPartial content.

BUT i have another problem , as an illustration in my renderPartial content i have an CGridView and some control( textField, and button ).

If i used pagination or sorting by CGridView feature… to refresh CGridView THEN my registerScript i told above can’t work

Is there any solution ? or Am i missing something ??

Thanks a lot

Stefanus

Hi!

The problem is with ClientScript, when your try to do too complicated stuffs it don’t works fine.

You can try to do without clientScript, so writing all javascript code needed by the refreshed div in the refreshed div itself.

Remember to manually give unique id to all your items, or they will conflict with id outside the refreshed div.

The solution I am speaking about in the post you read is this one.

It does exactly this work, it publish all the clientscript in the refreshed div resolving the problem of clientscript, but are still needed unique id on all elements in the div.

Hi zac… thanks for your responds… I’m appreciate it.

I have tried to write JQuery Script without resgisterScript, but the result is same ,

I still can’t use that JQuery script when i click next page on CGridView pagination.

I’m sorry i still not too understand with this statement. would you want to look of my code. this code is renderPartial content include JQuery script.




<?php

$url = CController::createUrl('SDM_PersonJob/SearchPerson');

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

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

	$('#PersonBrowser').toggle();

	return false;

});


$('#PersonBrowserTable2 table tbody tr').dblclick(function() {

	var id = $(this).find('td:eq(0)').text();

	var name = $(this).find('td:eq(1)').text();

	$('#SDM_PersonJob_Person').val(name);

	$('#SDM_PersonJob_SDM_PersonFK').val(id);

	$('#PersonBrowser').hide();

});


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

	$('#PersonBrowser').toggle();

	return false;

});


");

?>


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

	'id'=>'personBrowser-form',

	'enableAjaxValidation'=>false,

)); ?>


<?php

echo '<div class="row">

        <label>Kata Kunci</label>			

	<input name="PersonNameSrc" id="PersonNameSrc" type="text" value="" />';	

echo CHtml::ajaxSubmitButton('Ayo Coba Cari Lagi', CController::createUrl('SDM_PersonJob/SearchPerson'),			  array('update'=>'#PersonBrowser'),

			array('id'=>'search-submit'));

		 				

echo '</div>';	

echo '<span><br>Double Click to select item in the table below <span>';

?>

<?php $this->endWidget(); ?>




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

	'id'=>'PersonBrowserTable2',

	'dataProvider'=>SDM_Person::getSDMViewByName($name),

	'columns'=>array(

		array(

			'name'=>'ID',

			'value'=>'$data->ID',

			'htmlOptions'=>array('style'=>'display:none'),

			'headerHtmlOptions'=>array('style'=>'display:none'),

		),

		'Name',

		'NIK',

	),

)); ?>




What I want to are :

  1. when user double click on rows in the CGridView then JQuery script will work to get selected value to copy it, into another element.

  2. It didn’t work when i have click page 2 or next page in the CGridView

Zac… would you want to show me where is my fault based on your suggestion above ?

Thanks a lot

stefanus

I think that is impossible to use CGridView in such a context.

CGridView on ajaxSubmission will generate the whole page and the change only the div that contains the table.

Because of that all my good intention of renderPartialWithHisOwnClientScript are lost: the script remain outside the div class="grid-view".

Once I had a problem with CGridView, and I resolved by writing on my own the table.

Is not a great work, you can extends CLinkPager and Csort in order to generate ajaxSubmitButton that will works as you need.

It looks like a horrible solution, but remember that all this zii widget are quite new, they appeared only this january, before we always wrote all table by ourself.

Just as advice: the more you do hard stuff and the less widget can help you, they are punctual solution to standardized problem, you cannot hope that they will solve all your problem.

Concluding I think that you have to renouce to CGridView. If you will successfully complete this work, write it please on my topic, like that maybe in future they will include my hack in the release (and maybe solve the problems even in CGridView… )

Does any got solution for this problem…

I use a lot of ajax with ClistView and CGridView.I use the afterAjaxUpdate property in order to have ajax working after a pagination request ,see a snippet from code below,it’s a CListView but the same applies to CGridView





<?php

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

   		'id'=>'product-listview',

	'dataProvider'=>$productDP,

   	'itemView'=>'_product_view',

 	'summaryText'=>Yii::t('admin','Displaying {start}-{end} of total {count} results.'),

 	'pager'=>array(  'nextPageLabel' => Yii::t('pager','Next'),

                            'prevPageLabel' => Yii::t('pager','Previous'),

                            'firstPageLabel' =>Yii::t('pager', 'First'),

                            'lastPageLabel' => Yii::t('pager','Last'),

   	),

 	//afterAjaxUpdate is needed for the buttons to work after a paging request from CListView

   	'afterAjaxUpdate'=>'js:function(id,data){


//UPDATE BINDING

   	$("a.update_product").bind("click", function() {

                $.ajax({

                    type: "POST",

                    url: "'.Yii::app()->baseUrl.'/product/returnProductForm/",

                    data:{"product_id": $(this).attr("id"),

                              "update":true,

                              "YII_CSRF_TOKEN":"'. Yii::app()->request->csrfToken.'"

                                                                        },

             		beforeSend : function(){

                                       		$("#'.Categorydemo::ADMIN_TREE_CONTAINER_ID.'").addClass("ajax-sending");

                                                       		},

                                complete : function(){

                                              $("#'.Categorydemo::ADMIN_TREE_CONTAINER_ID.'").removeClass("ajax-sending");

                                                     		},




                    success: function(data){


                        $.fancybox(data,

                        {    "transitionIn"	:	"elastic",

                            "transitionOut"    :      "elastic",

                     		"speedIn"		:	600,

                            "speedOut"		:	200,

                            "overlayShow"	:	false,

                            "hideOnContentClick": false,

                              "width": 480,

                              "height":600,

                              "autoDimensions":true

                     		// "margin":0,

                              //"padding":0

                        }

                    );

                        //  console.log(data);

                    } //success

                });//ajax

                return false;

            });//bind


//VIEW PROPERTIES  BINDING

   	$("a.product_properties").bind("click", function() {

                $.ajax({

                    type: "POST",

                    url: "'.Yii::app()->baseUrl.'/product/returnProductProperties/",

                    data:{"id": $(this).attr("id"),

                              "YII_CSRF_TOKEN":"'.Yii::app()->request->csrfToken.'"

                                                                        },

             		beforeSend : function(){

                                       		$("#'. Categorydemo::ADMIN_TREE_CONTAINER_ID.'").addClass("ajax-sending");

                                                       		},

                                complete : function(){

                                              $("#'.Categorydemo::ADMIN_TREE_CONTAINER_ID.'").removeClass("ajax-sending");

                                                     		},




                    success: function(data){


                        $.fancybox(data,

                        {    "transitionIn"	:	"elastic",

                            "transitionOut"    :      "elastic",

                     		"speedIn"		:	600,

                            "speedOut"		:	200,

                            "overlayShow"	:	false,

                            "hideOnContentClick": false,

                              "width": 480,

                              "height":600,

                              "autoDimensions":true

                     		// "margin":0,

                              //"padding":0

                        }

                    );

                        //  console.log(data);

                    } //success

                });//ajax

                return false;

            });//bind





//DELETE BINDING

 $("a.delete_product").bind("click", function() {

 //$.fancybox.close();

 product_id=$(this).attr("id");

 product_title=$(this).attr("rel");

$("<div title=\'Delete Confirmation\'>\n\

             		<span class=\'ui-icon ui-icon-alert\' style=\'float:left; margin:0 7px 20px 0;\'></span>\n\

             		Product <span style=\'color:#FF73B4;font-weight:bold;\'>"+ product_title+"  (ID:  "+ product_id +"  )</span> will be deleted.Are you sure?</div>")

               		.dialog({

			resizable: false,

			height:170,

			modal: true,

                        zIndex:3000,

			buttons: {

				"Delete": function() {

                             		$.ajax({

                    type: "POST",

                    url: "'.Yii::app()->baseUrl.'/product/remove/",

                    data:{

                                "product_id":  product_id,

                                "YII_CSRF_TOKEN":"'.Yii::app()->request->csrfToken.'"

                                                                          },

                        beforeSend : function(){

                                       		$("#'.Categorydemo::ADMIN_TREE_CONTAINER_ID.'").addClass("ajax-sending");

                                                       		},

                                complete : function(){

                                              $("#'.Categorydemo::ADMIN_TREE_CONTAINER_ID.'").removeClass("ajax-sending");

                                                     		},

                    success: function(res){

                     		response=$.parseJSON(res);

                     		if (response.success==true) {

                         		$.fancybox.close();

                     		}




                    } //success

                });//ajax

       		// return false;


					$( this ).dialog( "close" );

				},

				Cancel: function() {

					$( this ).dialog( "close" );

				}

			}

		});

  });//bind

}

'

)); ?>




All javascript in afterAjaxUpdate is just a copy of the javascript I have in the <script> tags.