Yii JavaScript interfering with FancyBox

I use AJAX to load the content of the pages when a link is clicked and on some of those pages I have a button that activates a FancyBox popup window, upon every time the content is loaded the FancyBox activation is called (though it checks if there is a link which calls FancyBox first).

The thing is though that if the view loaded into FancyBox (using renderPartial) contains any JavaScript put there by yii, the next time I load that page (via AJAX) the FancyBox activation method fails. I have tried to debug it using Chrome developer tools but havn’t really gotten anywhere.

I have tried rendering it without JavaScript (by setting processOutput to False) and it works fine, every time I load a page the FancyBox activation method works and so does the actual FancyBox popup. FancyBox is built using jQuery so there shouldn’t be any conflicts.

I’m really lost here and have been trying to solve this for days, any idea?

Which scripts is Yii loading with the AJAX?

<script type="text/javascript" src="/flashkey/assets/258730a/jquery.js"></script> 

<script type="text/javascript" src="/flashkey/assets/258730a/jquery.ba-bbq.js"></script> 

<script type="text/javascript" src="/flashkey/js/jquery.fancybox-1.3.4.js"></script> 

<script type="text/javascript" src="/flashkey/js/jquery.fancybox-1.3.4.pack.js"></script> 

<script type="text/javascript" src="/flashkey/js/page.js"></script> 


jQuery(function($) {


jQuery('body').delegate('#yt0','click',function(){jQuery.ajax({'type':'POST','beforeSend':showload(),'complete':hideload(),'url':'/flashkey/index.php?r=site/checkout','cache':false,'data':jQuery(this).parents("form").serialize(),'success':function(html){jQuery("#checkoutform").replaceWith(html)}});return false;});








page.js is just basic JS and it works fine with just that.

Similar to some trouble I had.

You will need to tell Yii what not to include like;

Yii::app()->clientScript->scriptMap = array(

            'jquery.js'         => false,

            'jquery-ui.min.js'  => false,

            'jquery-ui.css'     => false


[s]Sorry, I should have said, only the bottom section of script is being loaded via AJAX, the other script includes are in the header so they don’t change and don’t get loaded by renderPartial.

Edit, I do get this error with developer tools: Uncaught TypeError: Object #<an Object> has no method ‘fancybox’

It doesn’t get that error though the first time it’s loaded and everything is exactly the same after that.[/s]

alex-w you were right, I didn’t realize it was including jQuery even with render partial. Thanks, you help is much appreciated!

Hi I want to render a partial view :

<?php echo 'FILE ID '. $_GET['file_id'] ?>

<form action="" id="updateimageform_<?php echo $_GET['file_id'] ?>" style="display: block;">

    Title: <input type="text" value=<?php // 'No'.'&nbsp'.'Title';

      echo  !empty ($_GET['title'])? '"'.$_GET['title'] .'"' : '&nbsp';    ?>  name=<?php  echo '"'.$_GET['file_id'] .'_title' .'"'; ?>>

            Description : <input type="text" value=<?php // 'No'.'&nbsp'.'Title';

      echo  !empty ($_GET['desc'])? '"'.$_GET['desc'] .'"' : '&nbsp';    ?> name=<?php echo '"'. $_GET['file_id'] .'_desc' .'"' ?>>


    <input type="hidden" name=<?php  echo '"'.'fileid_' .$_GET['file_id'] .'"'; ?> value=<?php echo '"'. $_GET['file_id'] .'"' ?>>


[b]            $this->widget('zii.widgets.jui.CJuiButton', array([/b]

[b]		'name'=>'button',[/b]

[b]            //    'id'=>'update_btn',[/b]

[b]			'caption'=>'Save',[/b]

[b]		'value'=>'asd',[/b]

[b]		'options'=>array([/b]

[b]       'onclick'=>"js:function(){[/b]

[b]                      $.ajax({[/b]


[b] url: '/yii_test/pl/updateinfo',[/b]

[b] data:$('#updateimageform_' ".$_GET['file_id']."').serialize(),[/b]

[b]  success: function(){[/b]

[b]   alert('updated!');[/b]

[b]  }[/b]




[b]                              }",[/b]

[b]    ),[/b]




[b]          ?>[/b]

        <?php echo CHtml::button('UPD', array('id'=>'update_btn'));          ?>


with fancy box.But the JuiButton (bold in code) is not rendered properly in fancybox,I just get a plain button.Any ideas?