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.
<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.
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'); }