Friday, March 30, 2012

Jquery and Moo-tools/JavaScript conflict

The conflict with the two happens since they both refer to the function with the dollar symbol. The solution is quite simple: we just need to define an another symbol to refer to Jquery functions.


This is NOT working due to a conflict:

    <%--initiates the Jquery stuff--%>
    <script type="text/javascript" >
        function tick() {
            $('#my_jq_div').slideUp(function () { $(this).appendTo($('# my_jq_div ')).slideUp(); });
        }
        setInterval(function () { tick() }, 3000);
    </script>
    
    <%--initiates the Moo-tools stuff--%>
    <script type="text/javascript" >
        window.addEvent('domready', function () {
            var myVar = new MooStuff({ orientation: 'vertical' });
        });         
    </script>

This is working:

<%--initiates the Jquery stuff--%>
    <script type="text/javascript" >
        var jq = jQuery.noConflict();
        function tick() {
            jq('#my_jq_div').slideUp(function () { jq(this).appendTo(jq('# my_jq_div ')).slideUp(); });
        }
        setInterval(function () { tick() }, 3000);
    </script>
    
    <%--initiates the Moo-tools stuff--%>
    <script type="text/javascript" >
        window.addEvent('domready', function () {
            var myVar = new MooStuff({ orientation: 'vertical' });
        });         
    </script>

Enjoy!

No comments:

Post a Comment