1. Scenario
2. Solution

Scenario ¶

I have a CGridView with a list of clients/events. For each row (EventClient) I wanted a quick edit dialog.

I used Zaccarias excellent article as the base http://www.yiiframework.com/wiki/145/cjuidialog-for-create-new-model/

Solution ¶

First follow the wiki above to create all the required code. Then make the following modifications in your CGridView page:

Column hyperlink ¶

For each column, set the _updateComment_url property in the Javascript function to the required url

array(
	'name'=>'comment',
	'header'=>'Comments',
	'type'=>'raw',
	'value'=>'CHtml::link(
		($data["comment"]?$data["comment"]:"(comment)"),
		"",
		array(
			\'style\'=>\'cursor: pointer; text-decoration: underline;\',
			\'onclick\'=>\'{
				updateComment._updateComment_url="\'.
				Yii::app()->createUrl(
				"eventClient/updateComment",
				array("id"=>$data["id"]))
				.\'";
				updateComment();
				$("#dialogComment").dialog("open");}\'
			)
		);',
),

Javascript function ¶

In the same page include the updateComment() function that calls the action

<script type="text/javascript">

function updateComment()
{
	// public property
	var _updateComment_url;

	<?php echo CHtml::ajax(array(
		'url'=>'js:updateComment._updateComment_url',
		'data'=> "js:$(this).serialize()",
		'type'=>'post',
		'dataType'=>'json',
		'success'=>"function(data)
			{
				if (data.status == 'failure')
				{
					$('#dialogComment div.divComment').html(data.div);
					// Here is the trick: on submit-> once again this function!
					$('#dialogComment div.divComment form').submit(updateComment);
				}
				else
				{
					$('#dialogComment div.divComment').html(data.div);
					setTimeout(\"$('#dialogComment').dialog('close') \",2000);

					// Refresh the grid with the update
					$.fn.yiiGridView.update('event-client-grid');
				}

		} ",
	))?>;
	return false;

}

</script>