Yii-loading the rendering view using ajax in Fancybox

Sometimes we need to render a view in Fancybox.

Sometimes we need to render a view in Fancybox.

This technical guide describes how to implement it.

Step 1: Prepare the View File

 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 
 
 
    
  
  
  
  
 
 

Step 2: implement the controller method to return this view

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

Step 3: implement the js method and 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 }); }