$ is not defined..but it is it is fancybox that can't be found

Question

Having numerous struggles today.

I have a line in execution that is responding:

Uncaught ReferenceError: $ is not defined

This at first had me checking to see if jquery was loading but it is. The real error is that it can't find fancybox function.

My HTML element is:

<div><span class="fancybox"></span></div>

When a button is clicked a function runs doing stuff then when we get to this line it throws the error:

$('.bmgi_fancybox').fancybox.open(
{
    'afterClose': RefreshParentGridHandOff(SubGridName),
    'data-fancybox-type' : 'iframe',
    'href': FullUrl,
    'modal' : true
 });

The real error is that open is not a function of undefined...i.e. fancybox is undefined.

I have checked and all libraries are loaded and clicking on them they resolve??

<link rel="stylesheet" type="text/css" href="/.../jquery.fancybox.css">
<link rel="stylesheet" type="text/css" href="/.../jquery.fancybox.buttons.css">
<link rel="stylesheet" type="text/css" href="/.../jquery.fancybox.thumbs.css">

<script type="text/javascript" src="/.../jquery.1.10.1.min.js"></script>
<script type="text/javascript" src="/.../jquery.mousewheel.3.0.6.pack.js"></script>
<script type="text/javascript" src="/.../jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/.../jquery.fancybox.js"></script>
<script type="text/javascript" src="/.../jquery.fancybox.buttons.js"></script>
<script type="text/javascript" src="/.../jquery.fancybox.thumbs.js"></script>
<script type="text/javascript" src="/.../jquery.fancybox.media.js"></script>

The file renames are correct as we don't allow hyphens in file names....and as I said clicking on them in dev tools the link resolves and opens.

I have spent 2 hours on this and don't know how to continue figuring this out....I mean clearly something is missing but I can't see it / don't understand.

Thank You

---

I just thought of another important thing

The button being clicked and the function calling fancybox.open are in an iframe while the libraries span element shown etc are in the parent....I think that might be my issue.

Answer 1

The open method is undefined when called the way you are calling it:

typeof $.fancybox.open // function
typeof $('SELECTOR').fancybox.open // undefined

You'll need to call it like so:

$.fancybox.open({
    afterClose: function(){
        RefreshParentGridHandOff(SubGridName);
    },
    type: 'iframe',
    href: FullUrl,
    modal: true
});

I hope this helps!