Update/delete model with CJuiDialog (works in CGridView)

Tutorials

AJAX, juidialog, user interface, CGridView

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 codeYii::app()->clientScript->scriptMap['jquery.js'] = false;

if( isset( $_POST['action'] ) && $_POST['action'] == 'confirmDelete' )
{
$model->delete();else
{
if( isset( $_POST['confirmDelete'] ) )
{
$model->delete();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.


 
 
 
```php 
// 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">
 
  <?php 
 
  echo CHtml::submitButton( 'Yes', array( 'name' => 'confirmDelete', 
 
    'id' => 'confirmDelete' ) );
 
  echo CHtml::submitButton( 'No', array( 'name' => 'denyDelete' ) ); 
 
  ?>
 
 
  <?php
 
  /* !!! 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',
 
  ));*/
 
  ?>
 
</div>
 
 
<?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 handlersif( 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 );
}