Difference between #4 and #5 of
Update/delete model with CJuiDialog (works in CGridView)

Revision #5 has been created by ifdattic on Aug 8, 2011, 3:21:07 PM with the memo:

Added delete view code, some cleanup on code.
« previous (#4)


Title unchanged

Update/delete model with CJuiDialog (works in CGridView)

Category unchanged


Yii version unchanged

Tags unchanged

AJAX, juidialog, user interface, CGridView

Content changed

Introduction ------------------ This is based on this [article](http://www.yiiframework.com/wiki/145/cjuidialog-for-create-new-model/ ""). This tutorial will show you how to create Ajax dialog which allows to create new model, update or delete existing model. It works with simple links, CGridView button column links, adds a minimal amount of code and degrades gracefully with JavaScript turned off. Extension now available: [EUpdateDialog](http://www.yiiframework.com/extension/eupdatedialog/ "EUpdateDialog") **Important:** For newest code updates you should check the extension.  
As it takes some time to update two similar but a little different texts, I probably won't be updating this tutorial (unless it's an important update). So my suggestion would be to read this tutorial to get an idea how it works, and then check extensions article and source code. Sorry for the inconvenience, but I think this time would be better spend updating extension itself.

Controller code
Yii::app()->clientScript->scriptMap['jquery.js'] = false;

if( isset( $_POST['action'] ) && $_POST['action'] == 'conf
irmDelete' )
if( isset( $_POST['conf
irmDelete'] ) )
This action checks if it's Ajax request, if it is, then it checks if user confirmed/denied deletion or it should render a view with confirmation form. Delete confirmation view at least needs to contain two submit buttons with _confDelete_ and _denyDelete_ names. If browser has JavaScript turned off, confirmation will be rendered normally allowing to delete a model without JavaScript.

// You need to have a form in your delete view file!
<?php $form = $this->beginWidget( 'CActiveForm', array(
  'id' => 'location-delete-form',
  'enableAjaxValidation' => false,
  'focus' => '#confirmDelete',
)); ?>
<div class="buttons">
  echo CHtml::submitButton( 'Yes', array( 'name' => 'confirmDelete', 
    'id' => 'confirmDelete' ) );
  echo CHtml::submitButton( 'No', array( 'name' => 'denyDelete' ) ); 
  /* !!! Or you can use jQuery UI buttons, makes no difference !!!
  $this->widget( 'zii.widgets.jui.CJuiButton', array(
    'name' => 'confirmDelete',
    'caption' => 'Yes',
  $this->widget( 'zii.widgets.jui.CJuiButton', array(
    'name' => 'denyDelete',
    'caption' => 'No',
<?php $this->endWidget(); ?>
View Code
If you want to use dialog with CGridView widget you need to make it look similarly to this:
if( data.status == 'failure' )
$( '#update-dialog
-content div.update-dialog-content' ).html( data.content );
$( '#update-dialog div.update-dialog-content form input[type=submit]' )
.die() // Stop from re-binding event handlers
if( data.status == 'success' ) // Update all grid views on success
$( 'div.grid-view' ).each( function(){
 // Change the selector if you use different class or element
$.fn.yiiGridView.update( $( this ).attr( 'id' ) );
setTimeout( \"$( '#update-dialog' ).dialog( 'close' ).children( ':eq(0)' ).empty();\", 1000 );
14 0
Viewed: 69 748 times
Version: 1.1
Category: Tutorials
Written by: ifdattic
Last updated by: ifdattic
Created on: Jul 11, 2011
Last updated: 6 years ago
Update Article


View all history