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 = $('#decValLon').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();    

};