How to render a view in Fancybox using ajax

You are viewing revision #8 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#7)next (#9) »

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
[js]
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: 30 972 times
Version: Unknown (update)
Category: How-tos
Written by: rix.rix.
Last updated by: 张 迪
Created on: Jul 23, 2012
Last updated: 11 years ago
Update Article

Revisions

View all history

Related Articles