CGridView + Pagination + AjaxLink

Hello,

THE SCENARIO:

I’m having a CGridView, with built-in paginated results (10 per page) and I’ve added an AjaxLink as a new column.

This link calls a delete action. The action returns a simple text message. Message is appended to a DIV element in the page.

Everything works fine on THE FIRST page of the grid.

At the end of the page, for each row of the grid (ten rows) I see an equivalent JQuery statement like the following:

jQuery(’#del_action_13’).live(‘click’,function(){jQuery.ajax({‘dataType’:‘script’,‘type’:‘POST’…

THE PROBLEM

At the end of the page there are only ten JQuery assignments like the one above, for the links on the first page. For the others there are is no JQuery code produced. When changing the page, the SCRIPT tag at the end of the page is not altered with any new JQyery code to suppor the AjaxLinks.

Does anybody know if I simply do something wrong? Has anybody added an AjaxLink (or AjaxButton) on an Ajax-paginated CGridView?

I’m currently using Yii 1.1.3.

Thank you.

Can you just use a class for the ajax links instead of the id tag? With the .live() function, that should do the trick. What do you think?

Thank you for your quick answer.

Don’t know how do do this by creating a AjaxLink. When creating it I put to htmloptions array:


'class'=>'del_action',	instead of 'id'=>'del_action_'.$data->PartnerId,

									Now the JQuery requests looks like this:

jQuery('#yt2').live('click',function(){jQuery.ajax({'dataType':'script','type':'POST',...

THE RESULT:

Let’s say : INITIAL GRID PAGE = the grid page loaded when action page is loaded.

ANY OTHER PAGE = … any other grid page.

What happens now is that clicking any AjaxLink in ANY OTHER PAGE, the Ajax request is the one of the corresponding row of the INITIAL GRID PAGE.

This happens because in ANY OTHER PAGE the JQuery code is the same (because they all have IDs from yt0 to … yt9).

Will give it some more thought in a few hours.

Thanks

Note: it works just fine if CGridView doesn’t use Ajax for pagination & stuff…


	

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

'ajaxUpdate'=>false,

...



Just wondering if this could work the nicer way too.


'class'=>'del_action',	instead of 'id'=>'del_action_'.$data->PartnerId,

									Now the JQuery requests looks like this:

jQuery('#yt2').live('click',function(){jQuery.ajax({'dataType':'script','type':'POST',...

Looks like you’re still using the id tag here. Try it this way:


jQuery('.del_action').live('click',function(){jQuery.ajax({'dataType':'script','type':'POST',...

You can still make use of a specific id tag if it will help you access the proper row.

For example




jQuery('.del_action').live('click',function(){

  var id = $(this).attr('id');

});



Does this help?

The statements


jQuery('.del_action').live('click',...

or


 jQuery('.del_action')....

are generated by the framework, based on the controls (AjaxLink here) passed as values in grid’s columns.

As I see so far this code is (and should be) managed by the framework.

Do you suggest I take on generating these statements myself instead of using the ones inherently produced by Yii ?

No, I wouldn’t suggest that if there’s a way to do it properly. I’m a bit surprised that Yii isn’t using a class for this, but I haven’t done that much with the actual AjaxLink class. I’ve been building projects on this framework a little faster than I’ve been learning it, so sometimes my solutions step outside the framework. I’m sorry I couldn’t help you.

The CClientScript managment (the stuff that creates the id like "#yt2") is a still a bit bagous, and in this not-standard scienarios create some strange behaviour.

There are some post in wich we discussed in detail what is the problem, but no solutions are still arrived.

You are lucky because you can easily workaround:

Your problem is only the link in gridView, so you can create it like that:




		CHtml::link(

			$label,

			'',

			array(

					'onClick'=>CHtml::ajax(array

					(

						'url'=>$url,

						'update'=>$div,

					), 

					'style'=>"cursor:pointer;"

				)

			)

		);



This is an equivalent of AjaxLink, vut avoid to use CClientScript, the ajax code will be placed in the link itself and everithing will work properly.

Following your advice, using CHtml::link with ‘onClick’=>CHtml::ajax(…) worked.

Thank you Zaccaria!

Yes, I’m on a similar path :).

Zaccaria’s piece of advice worked. It’s a nice workaround. Thank you for your time.

good idea!!!

Hi

I’m having something similar

but I can’t use the solution workaround

because I need to be initialising a custom pageSize dropdownbox with this


$('select#result-per-page').selectmenu({style:'dropdown',width:55});

again this works fine on the first load but whenever the grid is reload by an ajax next or previous page, the select loose the design.

so I was wondering if there was any way to launch a js process at every reload (onload or success) ?

Thanks

Hello please help me …

I have Cgridview in which I have given edit link onclick of edit link I want a window to popup with the functionalities to edit the record can anyone please help me …the snippet of the code is given.





  $dataProvider=new CActiveDataProvider('TmpTrnHiringLandDetails');            

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

      'dataProvider'=>$dataProvider,'id'=>"hello",

    'columns'=>array(

    'village_name',

    'sy_no','area_acre','area_kanal','area_marla','land_belongs_to','ownership',


   array('name'=>'Actions','type'=>'raw','value'=>'CHtml::link(Edit',array(

                     'onClick'=>CHtml::ajax(array

                   (

                       'url'=>'Trn/updaterecord',

                                            

                    ) 

                     )

                     )

                ),

 

	    ),

  

));

 $this->endWidget();

?>   




thanks cocomarocco, that work very well

Just brilliant!!! Thanks!!