Popup AJAX DialogBox without any extension

In this wiki I explain how to show a default popup dialogbox (like Gii does) using an existing module.

You can use any module or component or library that includes fancybox jquery library.

In this example we will use the Gii generated jquery and css but you can use any other that includes the jquery.fancybox-1.3.1.pack.js and jquery.fancybox-1.3.1.css files.

So, In your view add this (for example in views/controllerA/testPopup.php)

$cs = Yii::app()->clientScript;
$cs->coreScriptPosition = CClientScript::POS_HEAD;
$cs->scriptMap = array();
$baseUrl = Yii::app()->getModule('gii')->assetsUrl; //the assets of existing module 
$cs->registerCoreScript('jquery');
$cs->registerCoreScript('jquery.ui');
$cs->registerScriptFile($baseUrl . '/js/fancybox/jquery.fancybox-1.3.1.pack.js'); 
$cs->registerCssFile($baseUrl . '/js/fancybox/jquery.fancybox-1.3.1.css');
$cs->registerScriptFile(Yii::app()->request->baseUrl . '/js/popup.js');
echo "<div id='your-form-block-id'>";
echo CHtml::beginForm();
echo CHtml::link('an ajax test', array('controllerA/textA'), array('class' => 'class-link'));
echo CHtml::endForm();
echo "</div>";

In protected folder , create (if it is not exists) js folder and a file with name popup.js

$(document).ready(function() {
    $('.class-link').click(function() {
        var title = $(this).attr('rel');
        $.fancybox.showActivity();
        $.ajax({
            type: 'POST',
            cache: false,
            url: $(this).attr('href'),
            data: $('#your-form-block-id form').serializeArray(),
            success: function(data) {
                $.fancybox(data, {
                    'title': title,
                    'titlePosition': 'inside',
                    'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
                        return '<div id="tip7-title"><span><a href="javascript:;" onclick="$.fancybox.close();">close</a></span>' + (title && title.length ? '<b>' + title + '</b>' : '') + '</div>';
                    },
                    'showCloseButton': false,
                    'autoDimensions': false,
                    'width': 900,
                    'height': 'auto',
                    'onComplete': function() {
                        $('#fancybox-inner').scrollTop(0);
                    }
                });
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                $.fancybox('<div class="error">' + XMLHttpRequest.responseText + '</div>');
            }
        });
        return false;
    });

    $(document).on('click', '#fancybox-inner .close-code', function() {
        $.fancybox.close();
        return false;
    });
});

In your controllerA create the actions textA and TestPopUp

public function actionTextA() {
        if (!Yii::app()->request->isAjaxRequest)
            $this->render('yourView');
        else {
            $this->renderPartial('yourView');
            Yii::app()->end();
        }
    }

    public function actionTestPopUp() {
        $this->render('testPopup.php');
    }

It is done! Now you have the desired functionality

Note: Parts of code already been written in Gii Yii module

5 1
7 followers
Viewed: 22 559 times
Version: 1.1
Category: How-tos
Last updated by: Maurizio Domba Cerin
Created on: Jun 25, 2013
Last updated: 2 years ago
Update Article

Revisions

View all history

Related Articles