Question

Something really weird is happening to my Rails app.

For some strange reason, jQuery does not recognise my id’s in the DOM.
Let me give you an example.

I have a JavaScript function as shown below:

<script>
    function myFunction(){
        $('#hello').toggle();
    }
</script>

Simple enough, it should toggle the element with the id=”hello”.
But it gives me a $("#hello") is null error. (Even though there is one in the view file)

But if I use $('hello').toggle() instead of $('#hello').toggle(), the expected behavior is observed.

Can somebody please tell me what is happening?

Answer 1

Could it be that you (or some component) is adding the Prototype library to your page? In Prototype, you select by ID using $(‘id’) rather than $(‘#id’). Also, Prototype’s $() function will return null if it doesn’t find a match, while jQuery’s $() function will never return null.

If Prototype (or another library with a $() function) is being loaded after jQuery, it would stomp all over jQuery’s version of the $() function.

If it turns out this is the case, and you can’t avoid using both jQuery and the other library, you’ll probably want to take advantage of jQuery.noConflict.