Yii 1.1: Create custom button button with AJAX function in CGridView

16 followers

Introduction

CButtonColumn in CGridView can be customised to include user built buttons. To learn a great deal about including custom buttons, read this excellent wiki. This tutorial will show how to call an action from one custom button using AJAX instead of regular GET calls.

How to

  1. Create a custom button in your grid. You can follow this tutorial for that.
  2. In the 'url' parameter of your button, you call your controller action:
'url'=>'Yii::app()->controller->createUrl("myAction",array("id"=>$data->primaryKey))'
  • In the 'click' function of your button you add the following code:
'click'=>"function(){
    $.fn.yiiGridView.update('my-grid', {  //change my-grid to your grid's name
        type:'POST',
        url:$(this).attr('href'),
        success:function(data) {
              $.fn.yiiGridView.update('my-grid'); //change my-grid to your grid's name
        }
    })
    return false;
  }
",

This will call the controller function using AJAX instead of redirecting the user to the url using GET parameters.

Example

We will create a button that sends email to the user and then prints a success flash screen.

In your controller:

public function actionEmail($id)
{
  $model = $this->loadModel($id);
  $email = $model->email; //this is the user email
  if (mail($email, 'My Subject', 'my message'))
    echo 'email sent to '.$email;
  // if AJAX request, we should not redirect the browser
  if(!isset($_GET['ajax']))
     $this->redirect(Yii::app()->request->urlReferrer);
}

In your view file, in a CButtonColumn of the grid:

array
(
    'class'=>'CButtonColumn',
    'template'=>'{email}{view}{update}{delete}',
    'buttons'=>array
    (
        'email' => array
        (
            'label'=>'Send an e-mail to this user',
            'imageUrl'=>Yii::app()->request->baseUrl.'/images/email.png',
            'click'=>"function(){
                                    $.fn.yiiGridView.update('user-grid', {
                                        type:'POST',
                                        url:$(this).attr('href'),
                                        success:function(data) {
                                              $('#AjFlash').html(data).fadeIn().animate({opacity: 1.0}, 3000).fadeOut('slow');
 
                                              $.fn.yiiGridView.update('user-grid');
                                        }
                                    })
                                    return false;
                              }
                     ",
            'url'=>'Yii::app()->controller->createUrl("email",array("id"=>$data->primaryKey))',
        ),
    )

In your view file you also need to include the div for the flash message:

<div id='AjFlash' class="flash-success" style="display:none"></div>

Total 1 comment

#14256 report it
Abhishek Shah at 2013/07/30 07:10am
Nice tutorial!

Nice try to explain it!It will very helpful to begineers and who want to do things with ajax!

Leave a comment

Please to leave your comment.

Write new article
  • Written by: nkd
  • Category: How-tos
  • Yii Version: 1.1
  • Votes: +17
  • Viewed: 42,722 times
  • Created on: Oct 23, 2012
  • Last updated: Oct 24, 2012
  • Tags: ajax request, CGridView