Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. This is working well with my application, but the problem is, it is only working well on one page and on the other one, when I load it, it is giving me an error saying fancybox is not a function. I get to see this error in the error console and in the firebug console. I am not sure what could the problem. The same code works in another page, but it doesn't on this one?

$("<a href=\"#showmap\">Map</a>").fancybox is not a function

I am pretty sure it is not re-usability issue. But when I test to see if fancybox's original files have been loaded, they are loaded with the dom, so it might not be actual problem. But I am unable to understand what else could the problem be.

This is my code

abbr: is just a text bit. I have different divs based on what the user selects. And each div would have its own controls, which would start with that text and are appended with their own definitions such as mapresults, decValLat, decValLon etc.

ex: abbr>>east and then the ids would be eastmapresults, eastdecValLat, eastdecValLon etc.

function showMapFancybox(abbr){
    var abbr;
    $('#'+abbr+'mapresults').hide(); 
    $('<a href="#showmap">Map</a>').fancybox({
        overlayShow: true,
        onClosed: function() {
            $('#'+abbr+'mapresults').show();
            map_latdec = $('#decValLat').attr('value');
            map_longdec = $('#decVa开发者_StackOverflow中文版lLon').attr('value');
            map_latdeg = $('#degValLat').attr('value');
            map_longdeg = $('#degValLon').attr('value');

            $('#'+abbr+'decValLatsub').val(map_latdec);
            $('#'+abbr+'decValLonsub').val(map_longdec);
            $('#'+abbr+'degValLatsub').val(map_latdeg+'N');
            $('#'+abbr+'degValLonsub').val(map_longdeg+'W');
        }
    }).click();    
};

I already had this type of errors because i was reloading jQuery after the plugin import, check you don't reimport jquery by mistake (sometimes included in a package like jQuery tools).

I just had this issue, it seem some versions of jQuery are not compatible with versions of FancyBox, for example Fancybox 1.3.4 is buggy with jQuery versions below 1.7 and doesn't work on version higher than 1.8.

Possible Solutions:

1) have you already loaded jQuery? If not, then load it before any $ commands start.

2) Check, probably you are loading jquery library (.js) several times during the page. Try to load only one.

3) In the end of file, you can execute this javascript command: $ = jQuery.noConflict(); and it might solve. If not, then anywhere use the word jQuery instead of $, and it will work too.

You need to load the extensions like easing.js and mousewheel.js BEFORE the main fancybox plugin. That solves the problem.

If "fancybox" as a function does not exist, it is likely that either the jQuery source or the plugin source are failing to load into your page. Make sure that the pathing, file names, and extension are all correct.

EDIT: Make sure that you link to jQuery Source before you link to any plugins. If a plugin is loaded into your HTML before jQuery is, the plugin fails.

In my case it was jQuery.noConflict(); row in another jQuery plugin ... when I removed everything started to work.

If you are using a plugin which includes JQuery into your header tag, this trouble can arise. I recently added 'TheThe Slider' to my blog, all my FancyBoxes stopped working. There are easy fixes for this situation though. basically, go to the plugin directory, search for the call to jquery and make it's usage conditional. If you would like to see my implementation of this I did blog about it with screen-capture.

I got this issue in my WordPress web site and I found the issue was happening due to fancybox.js presenting twice in the code from two plugins which I installed. So check your code and make sure to load from one source.