Introduction ¶

This tutorial will show you how to create Ajax dialog. It's very simple code.

Javascript Code ¶

Create a simple function and load this in head on your page.

[javascript]
<script type="text/javascript">
$('#document').ready(function(){
	$('.openDlg').live('click', function(){
		var dialogId = $(this).attr('class').replace('openDlg ', "");
		$.ajax({
			'type': 'POST',
			'url' : $(this).attr('href'),
			success: function (data) {
				$('#'+dialogId+' div.divForForm').html(data);
				$( '#'+dialogId ).dialog( 'open' );
			},
			dataType: 'html'
		});
		return false; // prevent normal submit
	})
});
</script>

This is the code in the View.

<?php echo CHtml::link('MyDialog', Yii::app()->createUrl('site/page'), array('class' => 'openDlg divDialog')); ?>
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array('id'=>'divDialog',
	'options'=>array( 'title'=>Yii::t('Dialog Title', 'autoOpen'=>false, 'modal'=>true, 'width'=>600)));
?>
	<div class="divForForm"></div>
<?php
$this->endWidget(); 
?>

This is the code on controller

public function actionPage(){
	$this->renderPartial('myPage');
}