How to render a view in Fancybox using ajax

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
[javascript]
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
});
}
4 0
14 followers
Viewed: 31 631 times
Version: 1.1
Category: How-tos
Written by: rix.rix.
Last updated by: 张 迪
Created on: Jul 23, 2012
Last updated: 12 years ago
Update Article

Revisions

View all history

Related Articles