why is this not working CGridView

Hi,

I figured out how to make an ajax call for CButtonColumn inside a CGridView, but now my problem is that, i can’t access the values of the CButtonColumn inside the success function of the ajax htmloption, this is what my CGridView looks like:

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

array('dataProvider' => $dataProvider,

		'id'=>'select-grid',

		'columns'=>array(

			'name',

			array(

				'class'=>'CButtonColumn',

				'template'=>'{add}',

				'buttons'=>array(

					'add'=>array(

						'label'=>'Add Contact',

						'imageUrl'=>Yii::app()->request->baseUrl.'/images/email.png',

						'url'=>'Yii::app()->createUrl("site/addContact", array("add"=>$data["person_id"]))',

						'options'=>array(  // this is the 'html' array but we specify the 'ajax' element

							'id'=>'abutton', // this id is given to all the buttons in the CGridView

							'ajax'=>array(

								'type'=>'POST',

								'url'=> "js:$(this).attr('href')", // ajax post will use 'url' specified above

								'success'=>"function(data){

									var excuse = $(this).attr('href'); // this is showing undefined

									alert('Trial ' + excuse + ' And '+$(this).parent().parent().children(':first-child').text() );// this is showing undefined

								}"

							),

						),

						

					)

				)

			)

		)

	)

);

So how do we do that? How do i access the href of the button of a particular row?

i want to modify the href to become empty, and also modify the image src to ‘alreadyadded.png’, alt to Already Added

So, basically i want to update the values of the CButtonColumn (but row wise) through the success function, how do i do that?

As you will notice in the code

$(this).attr(‘href’);

$(this).parent().parent().children(’:first-child’).text()

are returning undefined.

Further, is there a way to assign different ids to the buttons? instead of the same id to all the buttons in the column?

I think what you need is to use the ‘click’ property of the button, not ‘ajax’ (not sure if ajax is an actual property - it’s not listed here: http://www.yiiframework.com/doc/api/1.1/CButtonColumn#buttons-detail).

Here’s an example from some of my code:

'buttons'=>array(

	'edit'=>array(

		'imageUrl'=>Yii::app()->request->baseUrl.'/images/update.png',

		'url'=>'$data->id',

		'click'=>'function(event){

			event.preventDefault();

			$.ajax({

				global: false,

				url: "'.$this->createUrl("equipment/editrow").'",

				type: "GET",

				async: false,

				data: ({id : $(this).attr("href"), ajax : true }),

				dataType: "json",

				success: function( result ){

					//omitted code to open a dialog box containing a form for this example

				}

			})

		}',

	),

Yeah, well ajax is not listed, but somehow it was making ajax calls, actually i put ajax inside the html options of the custom button, anyway let me try with your code.

I just tried your code, ajax is definitely working, but i’m still not being able to access the CButtonColumn values inside the success function

var url2 = $(this).attr("href"); // this is definitely working

but this is not

success: function( result ){

              alert("Thissss "+result +" "+$(this).attr("href"));

              // but in this i can't access the $(this).attr("href")

              //omitted code to open a dialog box containing a form for this example

     }

here’s what i did in the click property of the button

'click'=>'function(event){

                 event.preventDefault();

                 var url2 = $(this).attr("href"); // this is definitely working

                 $.ajax({

                       	global: false,

                      	url: url2, // "'.$this->createUrl("equipment/editrow").'",

                       	type: "POST",

                       	async: false,

                       	// data: ({id : $(this).attr("href"), ajax : true }),

                       	// dataType: "json",

                       	success: function( result ){

                      			alert("Thissss "+result +" "+$(this).attr("href"));

                       			// but in this i can't access the $(this).attr("href")

                                     	//omitted code to open a dialog box containing a form for this example

                                       }

                  })

}',

Thanx for prompt reply, but i’m still stuck!!

Bump, still haven’t figured it out, can anyone help please?

Well i figured it out, will be posting my answer in a while

It’s a jQuery thing, we have to pass the context to the success function, which can be done either using the context property or using $.proxy(), as seen here in stackOverflow.

I will put up some code when i figure out how to change the href, and alt, and image src properties of the buttoncolumn.

Edit: took a break

here’s what i finally did inside the button:

'click'=>'function(event){

               event.preventDefault();

               var url2 = $(this).attr("href");

               $.ajax({

                  global: false,

                  url: url2,

                  type: "POST",

                  async: false,

                  // data: ({id : $(this).attr("href"), ajax : true }),

                  // dataType: "json",

                  success: $.proxy(function( result ){

                           alert("Thissss "+result +" "+$(this).attr("href"));

                           // $(this).parent().remove(); // this works

                           // $(this).attr("href","#"); // this works, but # is giving an error

                           $(this).attr("title","Contact Added"); // this works but we have to change the image alt

                           // $(this).child().attr("alt","Contact Added"); // not working

                           $(this).parent().find("img").attr("alt","Contact Added"); // this works

                           },this)

                })

         }',

So it works, but have to take care of the href being opened in a new tab, which basically doesn’t happen through ajax, so how do we handle that?

might be I am wrong .but what i figured out is you have given two or more buttons the same id which might be creating the problem because id is a unique attribute used for one element onlyyyyyyyy

yeah, i figured that out, but the method i have posted works too.