MooTools is messing Facebook JavaScript SDK

Question

I have the page which has MooTools used in the page and I have added facebook sdk too.

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>

and in the body it is like this.

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({
        appId      : 'myappid',
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true, // parse XFBML
        oauth      : true
    });
</script>

For sending FB invite request I use.

FB.ui({
            method: 'apprequests',
            message: 'tests messages',
            //title: 'Invite you friend to MyApp',
            to: fbid
        },function(r){ console.log(r);  });

But this gives me "a is null" in all.js file. If I remove MooTools file, everthing works fine. But I need MooTools. How can I get fix for this problem? Any help please?

Thanks ... It just solves the problem of $ conflict. Though I tried it, but that doesn't help me. — Umakant Patil, Mar 07 '12 at 10:32
Ops.. I realized the problem is not jQuery. Its because of Moo tools. Any help on that — Umakant Patil, Mar 07 '12 at 10:34
that's why using jquery conflict is necessary. just answered a question like this : http://stackoverflow.com/questions/9597442/convert-jquery-code-to-mootools-1-11/9598672#9598672 — tusar, Mar 07 '12 at 10:35
Cant you use jQuery for what mootools is doing OR mootools for what jquery is doing? I see this a lot and it always seems senseless and wasteful to include 2 very powerful yet large libs into an app or site... — Tim Wickstrom, Mar 07 '12 at 20:15

score 0 · Answer 1 · answered Mar 08 '12 at 10:56

you load mootools AFTER jquery. this means that it won't take over $ and will fall back to its own noConflict mode, the selector remaining aliased as document.id only.

either all your mootools code needs to use that, or use the simple closure pattern that affords use of $ to document.id in mootools.

$; // jQuery
(function($) {
    $; // mootools
})(document.id);

other things to consider when using mootools: it's prototypical. make sure you don't do stupid stuff like, for ... in loops on Arrays w/o hasOwnProperty checks (bad idea to begin with but it's more widespread than one would think...)

aside from the above, you need to track it down to a specific bit of code that fails. it will likely be that you are passing the jQuery function to what mootools thinks is an element, eg, $('foo') when that's jQuery won't return the element object. Even $('#foo') won't work but $('#foo')[0] will.

MooTools is messing Facebook JavaScript SDK

1 Answers1