Open Dialog from ajax content


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">
	$('.openDlg').live('click', function(){
		var dialogId = $(this).attr('class').replace('openDlg ', "");
			'type': 'POST',
			'url' : $(this).attr('href'),
			success: function (data) {
				$('#'+dialogId+' div.divForForm').html(data);
				$( '#'+dialogId ).dialog( 'open' );
			dataType: 'html'
		return false; // prevent normal submit

This is the code in the View.

<?php echo CHtml::link('MyDialog', Yii::app()->createUrl('site/page'), array('class' => 'openDlg divDialog')); ?>
$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>

This is the code on controller

public function actionPage(){
3 1
Viewed: 24 381 times
Version: 1.1
Category: How-tos
Written by: Touzas
Last updated by: Touzas
Created on: Mar 8, 2013
Last updated: 11 years ago
Update Article


View all history

Related Articles