Snap.js JQuery conflict?

Question

I'm having trouble accessing my div elements with jQuery after implementing snap.js in my Ratchet project, does anyone know why and how can I fix this?

document.getElementById('mydivId').innerHTML   //THIS WORKS
$('#mydivId').html()  //THIS DOESN'T WORK

I've included the jquery.js and implemented $(document).ready(function(){});

I get "Uncaught TypeError: Cannot call method 'ready' of null"

Have you included `jquery.js`? Is the code in a `$(document).ready(fn)` block? Any errors in the console? Some more detail in the question would help. — Rory McCrossan, Nov 12 '13 at 14:09
yes, I've included jquery.js, I get "Uncaught TypeError: Cannot call method 'ready' of null" in the console — Jasper Giscombe, Nov 12 '13 at 14:20

score 0 · Answer 1 · answered Nov 13 '13 at 05:41

OK, I found what the issue is... turns out Snap.js also uses the $ alias like Jquery, so that's what creates the conflict. In the script tag on the index.html i renamed all occurrences of $ and changed it to $$.

    // Helper
    $$ = function(id){
        return document.getElementById(id);
    }, 
                ....
                $$('right-drawer').classList.add('active-drawer');
                ....
                $$('toggle-left').addEventListener('click', function(){
                    snapper.open('left');
                 });

and so forth.

score 0 · Accepted Answer · answered Nov 13 '13 at 05:46

try something like this,instead of $ use jQuery,so renaming anything.

 jQuery( document ).ready(function( $ ) {
   // Code that uses jQuery's $ can follow here.
 });

Other alternative

var j = jQuery.noConflict();
// Do something with jQuery
j( "div p" ).hide();

Snap.js JQuery conflict?

2 Answers2