Difference between #4 and #3 of Popup AJAX DialogBox without any extension

unchanged
Title
Popup AJAX DialogBox without any extension
unchanged
Category
How-tos
unchanged
Tags
Popup, AJAX, DialogBox, without, extensions, reusing, fancybox
changed
Content
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)

~~~
[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();
<?php echoecho CHtml::link('an ajax test',
array('controllerA/textA'), array('class' => 'class-link')); ?>
<?php echo
echo CHtml::endForm(); ?>
echo "</div>";
~~~

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

~~~
[php]
$(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

~~~
[php]
  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