Question

I am having an issue closing a fancybox popup when jquery is included within the popup page (i’m using AJAX and including an external php page within the popup). The fancybox is setup as follows:

$(".various3").fancybox({
'type'    : 'ajax',
'titlePosition'     : 'inside',
'transitionIn'      : 'none',
'transitionOut'     : 'none',
'ajax' : {
type        : 'GET'
}
});

The popup has a ‘Cancel’ button to allow users to close the popup (using jQuery.fancybox.close();). I have to include jquery within the popup page to allow some other functionality to work and this prevents the jQuery.fancybox.close(); from working. If i remove jquery from the popup page then it works fine, however I cannot work out how to reference the instance of jquery on the main page (i have tried parent in case, although i wouldn’t have thought this should work as it’s a div and indeed it didn’t). I have tried using:

var localjquery = jQuery.noConflict(true);

within the popup page and this allows me to use jQuery.fancybox.close(); to close the popup successfully however this prevents the use of $ to reference jquery which is needed for other plugins on this page that i can’t edit. If I add

var mainjquery = jQuery.noConflict();

after the first instance of jquery on the main page then this obviously works fine and i can refer to it as mainjquery on the parent, but if then try

mainjquery.fancybox.close();

on the popup it says mainjquery is undefined.

I suspect it’s a problem due to a combination of multiple jquery instances and loading a completely separate page via ajax into a div (rather than using an iframe etc whereby i could then use parent. or similar). If anyone could shed any light on how I could reference the mainjquery reference from the child popup, or a better way I can close the fancybox then that would be greatly appreciated.

Thanks so much!

Dave

Answer 1

The best thing to do is test to see if it is an ajax request, and if so don’t include the jquery (or any other scripts you already have for that matter).

Here’s a sample of code I use on my php pages for doing both ajax and regular page requests.

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
....
if(!IS_AJAX)
{
    //echo your header with scripts
    echo $header;
}
//else just echo the contents of the page body

edit:

If you need to add things to the head tag, you should be using an iframe instead of an ajax type for the fancybox.