Popup AJAX DialogBox without any extension

7 followers

This wiki article has not been tagged with a corresponding Yii version yet.
Help us improve the wiki by updating the version information.

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

Total 6 comments

#13803 report it
KonApaz at 2013/06/27 10:58am
Bug using Gii module

Note:

in this line $baseUrl = Yii::app()->getModule('gii')->assetsUrl; Gii will be loaded and the assetsUrl will be returned in $baseUrl

Unfortunately, there are cases that gii may modify attributes of Yii:app()->user.

So it is not preferable to use the above line to get the url foreach user request

The solution is: Executing the line at the first request, store the baseurl in database (with or not caching system) and use the stored variable on the second or above request

#13798 report it
KonApaz at 2013/06/26 06:04pm
About CGridview

If you want this functionality for each row of specified column you have to just add this code

'columns'=>array(
...
array('class'=>'CLinkColumn', 'urlExpression'=>'Yii::app()->createUrl("controllerA/actionA",array("var"=>$data->var))', 'htmlOptions' => array('class' => 'class-link')),
...
#13796 report it
KonApaz at 2013/06/26 11:56am
your-form-block-id as parameter

Yes,

You could generate the js code by php, So

Insead of $cs->registerScriptFile(Yii::app()->request->baseUrl . '/js/popup.js'); you could use $cs->registerScript("entire javascript code... with parameter from php");

the text could be generated by php, so you can do anything you want!

Also there is a better way to do that replacing $('#your-form-block-id form') with $(myvar1)

add also $cs->registerScript('globalvariable','var myvar1='.$phpcodevar);

If you want multiple selectors at once please post me a message to make an extension :)

#13791 report it
zvik2004 at 2013/06/26 08:48am
Make your-form-block-id a parameter

Hi,

I'm not that familiar with js;
Is there a way to pass the 'your-form-block-id' to the popup.js as a parameter (otherwise I guess I need a different popup.js for each form)?

Thanks

#13788 report it
KonApaz at 2013/06/26 06:08am
About view

if you mean about yourView.php, it can be contains any html code!

#13785 report it
Rajith R at 2013/06/26 01:08am
I "+" it .. post the example view code

please post the example view codes that u have used . it will be usefull

Leave a comment

Please to leave your comment.

Write new article