Fancybox Problem With Gridview

Hi All

I used FancyBox extension

http://www.yiiframework.com/extension/fancybox

I added fancy box to update action in grid view button , it’s work in perfect way in first results page , But the problem is in second page not work ?

how to fix that

Thanks in advance

my view :




<?php

$config = array( 

	'titleShow' => false,

);




/// Add fancy box Ext 

$this->widget('application.extensions.fancybox.EFancyBox', array(

'target'=>'#add',

'config'=>$config,));


$this->widget('application.extensions.fancybox.EFancyBox', array(

'target'=>'.update',

'config'=>$config,));

?>


<div class="texts"><?php echo CHtml::link('إضافةبرشور',array('pam/create'),array('id'=>'add')); ?></div>

<div class="texts"><?php echo CHtml::link('بحث متقدم','#',array('class'=>'search-button')); ?></div>

<div class="search-form" style="display:none">

<?php $this->renderPartial('_search',array(

	'model'=>$model,

)); ?>

</div><!-- search-form -->


<?php 

$this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'pam-grid',

	'dataProvider'=>$model->search(),

	'filter'=>$model,

	'cssFile' => Yii::app()->request->baseUrl."/css/gridview/styles.css",

	'columns'=>array(

		'pam_id',

		'title',

		'thumb',

		'file',

		  array(

                   	'name'=>'type',

                   	'header'=>'نوع الملف',

                   	'type'=>'html',

                   	'value'=>'$data->getTypeText($data->type)',




            	),

		'course_id',

		array(

		   	'template'=>'{update} {view} {delete}',

           	'htmlOptions'=>array('width'=>'100px'),

    		   'class'=>'CButtonColumn',

           	'buttons'=>array(

	'update'=>array(

       	'lable'=>'تعديل',

        	'options'=>array('class'=>'update'),

        	'imageUrl'=>Yii::app()->request->baseUrl.'/images/edit.png',

      	

	

	)

	,

  	'view'=>array(

   	'lable'=>'تفاصيل',

        	

        	'imageUrl'=>Yii::app()->request->baseUrl.'/images/view.png',

      	

	

	)

	,

  	'delete'=>array(

   	'lable'=>'حذف',

    	

        	'imageUrl'=>Yii::app()->request->baseUrl.'/images/delete.png',

      	'click'=>'function(){return confirm("هل انت متأكد?");}'

	

	)

	,

	

	

	),

		),

    	

    	

	),

)); 


?>




CGridView uses AJAX to update (by default) in doing so it removes the elements that were originally hooked by and brings in new ones. This is why moving to another page or reordering won’t trigger fancybox. You can set CGridView to run a jQuery function to hook the new elements after CGridView updates by using the property afterAjaxUpdate.




'afterAjaxUpdate'=>'function(id, data) {jQuery(".update").fancybox(); }



Dear Friend

At the top of the grid you call the widget only one time.




$this->widget('application.extensions.fancybox.EFancyBox');



At the bottom of grid ,we have to register the script in the following way.




Yii::app()->clientScript->registerScript('fancy','


$("body").on("focus",".update,#add",function(){

	

	$(this).fancybox({titleShow:false});

	return false;

	});


');



I hope this would solve the issue.

Regards.

Genosha thanks for your explain .

My bro seenivasan , yes it’s work and you sloved my problem thank u so much .

My Friend seenivasan , I had new problem it’s work in perfect way in Firefox but fancybox not work in

Google Chrome !

do you have any idea why ?

You are absolutely right My Dear Friend.

This is due to the fact I have chosen wrong event type.

Originally I have chosen "click" event.But for unknown reason I have to click twice to get it done.

So I have chosen "focus" event.

Yes as you said it is not working in my chromium browser.

Now I replaced it with "mousedown" event.

It is working(FIREFOX,CHROMIUM AND OPERA). But also check it in IE.( I am not a Windows user)




Yii::app()->clientScript->registerScript('fancy','


$("body").on("mousedown",".update,#add",function(){

        

        $(this).fancybox({titleShow:false});

        return false;

        });


');



Kindly give your feedback.

Thank you for fast and professional answer , It’s working on all browsers even IE .

[color="#006400"]/* moved from General Discussion */[/color]