Yii Framework Forum: CButtonColumn Ajax Post button? - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

CButtonColumn Ajax Post button? Rate Topic: -----

#1 User is offline   Mindphyre 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 37
  • Joined: 23-November 11

Posted 12 December 2011 - 09:12 PM

Hi All,
I need to add a button to my CButtonColumn that calls an action in my controller via AJAX/POST.
This button will simply change a field in a table from unpaid to paid.
I have the following in my view right now.
		array(
			'class'=>'CButtonColumn',
			'template'=>'{view}{update}{delete}{pay}',
			'buttons'=>array(
				'pay'=>array(
					'label'=>'Pay',
					'imageUrl'=>Yii::app()->request->baseUrl.'/images/pay.png',
					'url'=>'Yii::app()->createUrl("commissions/pay", array("rep"=>$data->salesrep_id, "id"=>$data->id))',
				),
			),
		),

But i want to have any editing request done via POST and not GET.
I've looked over the forum and Google and haven't been able to find any clear examples documented.
Any thoughts would be appreciated.
Thanks in advanced!!

Oliver
0

#2 User is offline   yiqing95 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 599
  • Joined: 27-December 10
  • Location:china

Posted 12 December 2011 - 11:28 PM

please look at the admin view generated by gii/giix, then mimic the delete functionality:

jQuery('#user-grid a.delete').live('click',function() {
	if(!confirm('Are you sure you want to delete this item?')) return false;
	var th=this;
	var afterDelete=function(){};
	$.fn.yiiGridView.update('user-grid', {
		type:'POST',
		url:$(this).attr('href'),
		success:function(data) {
			$.fn.yiiGridView.update('user-grid');
			afterDelete(th,true,data);
		},
		error:function(XHR) {
			return afterDelete(th,false,XHR);
		}
	});
	return false;
});



above is generated by gii; you can refer it and do the same thing with your "pay":


  your button config:
   'pay' => array(
    'label'=>'...',     // text label of the button
    'url'=>'...',       // a PHP expression for generating the URL of the button
    'imageUrl'=>'...',  // image URL of the button. If not set or false, a text link is used
    'options'=>array('class'=>'for-pay'), // HTML options for the button tag
    'click'=>'...',     // a JS function to be invoked when the button is clicked
    'visible'=>'...',   // a PHP expression for determining whether the button is visible
   )
  //mimic the delete button here:
  
<script type='text/javascript'>

jQuery('#user-grid a.for-pay').live('click',function() {
	if(!confirm('Are you sure you want to pay for this item?')) return false;
	
	var url = $(this).attr('href');
        //  do your post request here
        $.post(url,function(res){
               
             alert(res);
         });
            

	return false;
});

</script>

2

#3 User is offline   Mindphyre 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 37
  • Joined: 23-November 11

Posted 13 December 2011 - 11:12 AM

@yiqing95 Thank you for your reply. It's exactly what i needed.


Oliver
0

#4 User is offline   Mindphyre 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 37
  • Joined: 23-November 11

Posted 13 December 2011 - 01:20 PM

@yiqing95 I'm still very new to Yii....where do i find the code you quoted? i tried to find the gii/giix folder but i could not find it in my project files or the base Yii install.
0

#5 User is offline   Mindphyre 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 37
  • Joined: 23-November 11

Posted 13 December 2011 - 01:38 PM

Just figured it out...i used Yii::app()->clientScript->registerScript in my view. now i just need to get the button to run the script.
0

#6 User is offline   Mindphyre 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 37
  • Joined: 23-November 11

Posted 13 December 2011 - 02:24 PM

Ok here's what i have so far(and it work!!! thanks yiqing95)
In my view i added the following:
Yii::app()->clientScript->registerScript('pay', "
jQuery('#commissions-grid a.pay').live('click',function() {
        if(!confirm('Are you sure you want to mark this commission as PAID?')) return false;
        
        var url = $(this).attr('href');
        //  do your post request here
        $.post(url,function(res){
             alert(res);
         });
        return false;
});
");

and here's my CGridView
<?php $this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'commissions-grid',
	'dataProvider'=>$model->search(),
	'filter'=>$model,
	'columns'=>array(
		'id',
		'order_id',
		//'salesrep_id',
		'customer_id',
		'commission_total',
		array(
			'name'=>'status',
			'filter'=>array('paid'=>'Paid', 'unpaid'=>'Un-paid'),
		),
		array(
			'class'=>'CButtonColumn',
			'htmlOptions'=>array('width'=>'80px'),
			'template'=>'{view}{update}{delete}{pay}',
			'buttons'=>array(
				'pay'=>array(
					'label'=>'Pay',
					'imageUrl'=>Yii::app()->request->baseUrl.'/images/pay.png',
					'url'=>'Yii::app()->createUrl("commissions/pay", array("rep"=>$data->salesrep_id, "id"=>$data->id))',
					'options'=>array('class'=>'pay'),
					'visible'=>'$data->status == "unpaid"',
				),
			),
		),
	),
)); ?>

And in my controller i have my pay action:
	public function actionPay($id){
		if(Yii::app()->request->isPostRequest)
		{
			$commissions = $this->loadModel($id);
			if($commissions->status !== 'paid'){
				$commissions->status = 'paid';
				if($commissions->save()){
					echo 'Updated';
				}else{
					echo 'Error while paying';
				}
			}
		}else{
			throw new CHttpException(400,'Invalid request. Please do not repeat this request again.');
		}
	}

The only bit i'm trying to figure out now is how to refresh/redirect after the ajax request.
I tried both the redirect and refresh methods in my pay action but nothing happened. Does this need to be done via JS ?

Thanks
Oliver
0

#7 User is offline   yiqing95 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 599
  • Joined: 27-December 10
  • Location:china

Posted 14 December 2011 - 05:16 AM

View PostMindphyre, on 13 December 2011 - 01:20 PM, said:

@yiqing95 I'm still very new to Yii....where do i find the code you quoted? i tried to find the gii/giix folder but i could not find it in my project files or the base Yii install.

the code i give is html code ,you can viewed it from web browser ,not the admin.php(but is the output from it :D )
0

#8 User is offline   yiqing95 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 599
  • Joined: 27-December 10
  • Location:china

Posted 14 December 2011 - 05:23 AM

View PostMindphyre, on 13 December 2011 - 02:24 PM, said:

Ok here's what i have so far(and it work!!! thanks yiqing95)
In my view i added the following:
Yii::app()->clientScript->registerScript('pay', "
jQuery('#commissions-grid a.pay').live('click',function() {
        if(!confirm('Are you sure you want to mark this commission as PAID?')) return false;
        
        var url = $(this).attr('href');
        //  do your post request here
        $.post(url,function(res){
             alert(res);
         });
        return false;
});
");

and here's my CGridView
<?php $this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'commissions-grid',
	'dataProvider'=>$model->search(),
	'filter'=>$model,
	'columns'=>array(
		'id',
		'order_id',
		//'salesrep_id',
		'customer_id',
		'commission_total',
		array(
			'name'=>'status',
			'filter'=>array('paid'=>'Paid', 'unpaid'=>'Un-paid'),
		),
		array(
			'class'=>'CButtonColumn',
			'htmlOptions'=>array('width'=>'80px'),
			'template'=>'{view}{update}{delete}{pay}',
			'buttons'=>array(
				'pay'=>array(
					'label'=>'Pay',
					'imageUrl'=>Yii::app()->request->baseUrl.'/images/pay.png',
					'url'=>'Yii::app()->createUrl("commissions/pay", array("rep"=>$data->salesrep_id, "id"=>$data->id))',
					'options'=>array('class'=>'pay'),
					'visible'=>'$data->status == "unpaid"',
				),
			),
		),
	),
)); ?>

And in my controller i have my pay action:
	public function actionPay($id){
		if(Yii::app()->request->isPostRequest)
		{
			$commissions = $this->loadModel($id);
			if($commissions->status !== 'paid'){
				$commissions->status = 'paid';
				if($commissions->save()){
					echo 'Updated';
				}else{
					echo 'Error while paying';
				}
			}
		}else{
			throw new CHttpException(400,'Invalid request. Please do not repeat this request again.');
		}
	}

The only bit i'm trying to figure out now is how to refresh/redirect after the ajax request.
I tried both the redirect and refresh methods in my pay action but nothing happened. Does this need to be done via JS ?

Thanks
Oliver


refresh:
       $.fn.yiiGridView.update('yourGridIdHere');
      


// do after the ajax success , you see i give you "alert(res);" originally :rolleyes:

/* use document.reload(true); or location.href = location.href; :lol: to refresh current whole page, above is ajax update only refresh partial of page.*/
0

#9 User is offline   Mindphyre 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 37
  • Joined: 23-November 11

Posted 14 December 2011 - 12:33 PM

Perfect!! thanks yiqing95


Oliver
0

#10 User is offline   Backslider 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 363
  • Joined: 23-July 09

Posted 08 September 2012 - 11:23 AM

This is far far simpler to do like this, in your CGridView cButtonColumn:

array(
      'class'=>'CButtonColumn',
      'template' => '{mybutton}',
      'buttons'=>array
      (
          'mybutton' => array
          (
              'label' => 'My Funky Button',
              'imageUrl' => 'images/myfunkybutton.png',
              'url' => 'Yii::app()->createUrl("mycontroller/myaction", array("id"=>$data->id))',
              'options' => 'ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("my-grid")}')
          ),
      ),
     ),


Why you would want it as $_POST is beyond me, its no safer than $_GET... up to you to change accordingly
We were all once expert at....... nothing.

yii-language-behavior

My Blog
0

#11 User is offline   riaddiction 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 02-September 12

Posted 19 September 2012 - 08:15 PM

View PostBackslider, on 08 September 2012 - 11:23 AM, said:

This is far far simpler to do like this, in your CGridView cButtonColumn:

array(
      'class'=>'CButtonColumn',
      'template' => '{mybutton}',
      'buttons'=>array
      (
          'mybutton' => array
          (
              'label' => 'My Funky Button',
              'imageUrl' => 'images/myfunkybutton.png',
              'url' => 'Yii::app()->createUrl("mycontroller/myaction", array("id"=>$data->id))',
              'options' => 'ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("my-grid")}')
          ),
      ),
     ),


Why you would want it as $_POST is beyond me, its no safer than $_GET... up to you to change accordingly



Great Idea Backslider, i wonder if an array(... is missing after options' =>

i mean ...

array(
      'class'=>'CButtonColumn',
      'template' => '{mybutton}',
      'buttons'=>array
      (
          'mybutton' => array
          (
              'label' => 'My Funky Button',
              'imageUrl' => 'images/myfunkybutton.png',
              'url' => 'Yii::app()->createUrl("mycontroller/myaction", array("id"=>$data->id))',
              'options' => array( 'ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("my-grid")}') )
          ),
      ),
     ),

0

#12 User is offline   Backslider 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 363
  • Joined: 23-July 09

Posted 22 September 2012 - 12:18 PM

Yes, you are correct - bad copy and paste :)
We were all once expert at....... nothing.

yii-language-behavior

My Blog
0

#13 User is offline   IainG 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 15
  • Joined: 14-December 11

Posted 26 November 2012 - 06:10 PM

View PostBackslider, on 08 September 2012 - 11:23 AM, said:

This is far far simpler to do like this, in your CGridView cButtonColumn:

array(
      'class'=>'CButtonColumn',
      'template' => '{mybutton}',
      'buttons'=>array
      (
          'mybutton' => array
          (
              'label' => 'My Funky Button',
              'imageUrl' => 'images/myfunkybutton.png',
              'url' => 'Yii::app()->createUrl("mycontroller/myaction", array("id"=>$data->id))',
              'options' => 'ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("my-grid")}')
          ),
      ),
     ),


Why you would want it as $_POST is beyond me, its no safer than $_GET... up to you to change accordingly


This solves a problem I'm having, thanks! How would you add a confirmation yes/no popup into this ?
0

#14 User is offline   haseeb2k9 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 27
  • Joined: 19-November 12
  • Location:Pakistan

Posted 19 December 2012 - 06:51 AM

hi friend if in CGridView all cell's value of column are hide by this property('visible'=>'$data->status == "unpaid"',) then i want to hide the hole column.
can anybody tell how can i do this.

thanks
0

#15 User is offline   luc 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 211
  • Joined: 22-June 10
  • Location:france

Posted 19 December 2012 - 09:39 AM

Hi,
give a specific id to your column: "myId"

Then, if your using an ajax updat as above:

array(
      'class'=>'CButtonColumn',
      'template' => '{mybutton}',
      'buttons'=>array
      (
          'mybutton' => array
          (
              'label' => 'My Funky Button',
              'imageUrl' => 'images/myfunkybutton.png',
              'url' => 'Yii::app()->createUrl("mycontroller/myaction", array("id"=>$data->id))',
              'options' => 'ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("my-grid");$("myId").hide();}')
          ),
      ),
     ),
:

just add $("myId").hide() in your succes response.
Hey Ho !
Let's go !
0

#16 User is offline   haseeb2k9 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 27
  • Joined: 19-November 12
  • Location:Pakistan

Posted 20 December 2012 - 09:25 AM

hi luc
i try this but it only hide the header of column only for a second, later it seen similar to previously.
0

#17 User is offline   natter 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 8
  • Joined: 21-January 12
  • Location:Germany

Posted 24 February 2013 - 10:13 AM

Why does this work:
        array(
              'class'=>'CButtonColumn',
              'template' => '{inAttack}&nbsp;&nbsp;&nbsp;{isEmpty}',
              'buttons'=>array
              (
                  'inAttack' => array
                  (
                      'label' => 'I Attack this Treassure',
                      'imageUrl'=> Yii::app()->baseUrl.'/images/gicon_attack_small.png',
                      'url'=>'Yii::app()->createUrl("treasures/attack", array("id"=>$data->primaryKey))',
                      'options' => array( 'ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("treasures-grid")}') ),
                      //'visible'=>'$data->empty<=0',
                  ),
                 
                  'isEmpty' => array
                  (
                      'label' => 'This Treasure is empty',
                      'imageUrl'=> Yii::app()->baseUrl.'/images/icon_treasure1.png',
                      'url'=>'Yii::app()->createUrl("treasures/looted", array("id"=>$data->primaryKey))',
                      'options' => array( 'ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("treasures-grid")}') ),
                      //'visible'=>'$data->empty<=0', 
                  ),
                  
              ),
             ),


and this doesn't work:
        array(
              'class'=>'CButtonColumn',
              'template' => '{inAttack}&nbsp;&nbsp;&nbsp;{isEmpty}',
              'buttons'=>array
              (
                  'inAttack' => array
                  (
                      'label' => 'I Attack this Treassure',
                      'imageUrl'=> Yii::app()->baseUrl.'/images/gicon_attack_small.png',
                      'url'=>'Yii::app()->createUrl("treasures/attack", array("id"=>$data->primaryKey))',
                      'options' => array( 'ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("treasures-grid")}') ),
                      'visible'=>'$data->empty<=0',
                  ),
                 
                  'isEmpty' => array
                  (
                      'label' => 'This Treasure is empty',
                      'imageUrl'=> Yii::app()->baseUrl.'/images/icon_treasure1.png',
                      'url'=>'Yii::app()->createUrl("treasures/looted", array("id"=>$data->primaryKey))',
                      'options' => array( 'ajax' => array('type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("treasures-grid")}') ),
                      'visible'=>'$data->empty<=0', 
                  ),
                  
              ),
             ),

0

#18 User is offline   raj_y 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 11-July 14

Posted 11 July 2014 - 03:19 AM

array(
      'class'=>'CButtonColumn',
      'template' => '{mybutton}',
      'buttons'=>array
      (
          'mybutton' => array
          (
              'label' => 'My Funky Button',
              'imageUrl' => 'images/myfunkybutton.png',
              'url' => 'Yii::app()->createUrl("mycontroller/myaction", array("id"=>$data->id))',
              'options' => 'ajax' => array('confirm'=>'Yes or No','type' => 'get', 'url'=>'js:$(this).attr("href")', 'success' => 'js:function(data) { $.fn.yiiGridView.update("my-grid")}')
          ),
      ),
     ),


This add a confirmation yes/no popup before ajax call
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users