Yii 1.1: Open Dialog from ajax content

5 followers

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.

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

Total 1 comment

#12369 report it
bettor at 2013/03/16 07:40am
create your own widget

why not create a configurable widget and have all the js and html rendered automatically when the widget is rendered?

Leave a comment

Please to leave your comment.

Write new article