SqueezeBox.initialize : Object has no method adopt

Question

I'm trying to implement SqueezeBox.js on my website and I have an issue.

Here is my code :

<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/mootools-1.2.6-core.js"></script>
<script type="text/javascript" src="/js/SqueezeBox/SqueezeBox.js"></script>
<script type="text/javascript">
    $(function() {
        $("#connect").click(function () {
            SqueezeBox.initialize({
                size: {x: 350, y: 400}
            });
            SqueezeBox.open('..\connect.php', {handler: 'iframe'});
        });
    });
</script>

...

<a id="connect" href="#">CONNEXION</a>

When I click on my link, Chrome console says : " Uncaught TypeError: Object [object Object] has no method 'adopt' "

I tried to put " SqueezeBox.initialize({ }); " out of the Click event, and same error. So, it seems that SqueezeBox has a problem, but i can't find it.

Any tips?

Best regards

---

Ok, so I decided to look at SqueezeBox.js to see what was going on.

I seen at line 113, witch was the line reported from console :

$(this.doc.body).adopt(this.overlay, this.win);

I just replaced it by :

this.doc.body.adopt(this.overlay, this.win);

And it works perfectly now...

I guess it comes from the version of Jquery or something..

Thanks anyway, bye.

Answer 1

You're calling the .js function before the element is there. You could try moving your javascript to the end of the page, just before the closing '' tag. Better yet, seeign as you're using jQuery, why not put it inside a '$(document).ready()' block?

$(document).ready(function() {
    $("#connect").click(function () {
        SqueezeBox.initialize({
            size: {x: 350, y: 400}
        });
        SqueezeBox.open(\'..\connect.php\', {handler: \'iframe\'});
    });
});

This way it won't run until the page is loaded.