Yii 1.1: How to render a view in Fancybox using ajax

16 followers

Sometimes you want to render a view in Fancybox.

This How-to describes just one technique which will enable you to do this.

Have fun!

Step 1: Prepare your view file

<?
//add FancyBox files, either use widget or do manually.
//have used widget for ease of explanation.  Manually would be a 'lighter' approach
$this->widget('application.modules.admin.extensions.fancybox.EFancyBox', array());
 
//create an ajax link which will call fancybox AFTER the ajax call completes
echo CHtml::ajaxLink('NameOfLink',Yii::app()->createUrl('fancy'),
     array('type'=>'POST', 'update'=>'#preview', 'complete'=>'afterAjax'));
?>
 
//add the div which will hold our ajax response
<div style="display:none;">
<div id="preview">
<!-- space here will be updated by ajax -->
</div>
</div>

Step 2: Implement a controller method to return the view

public function actionFancy(){
Yii::app()->clientScript->scriptMap['*.js'] = false;
$this->render('view',array('value'=>'data'));
}

Step 3: Implement JS method to trigger Fancybox after Ajax update

function afterAjax()
{
$.fancybox({
        href : '#preview',
        scrolling : 'no',
        transitionIn : 'fade',
        transitionOut : 'fade', 
        //check the fancybox api for additonal config to add here   
        onClosed: function() { $('#preview').html(''); }, //empty the preview div
});
}

Total 1 comment

#13003 report it
Scott Deagan at 2013/04/27 12:42pm
I can't get this working

Any chance you could provide instructions that are a little more explicit (for the benefit of those of us who don't know JavaScript or where to place JavaScript in Yii)?

A simple complete working demo would be cool :)

Leave a comment

Please to leave your comment.

Write new article