jQuery $(document).ready is not a function - Rails 3.1

I am relat开发者_如何学JAVAively new to rails and recently upgraded my rails 3.0 application to rails 3.1. Things seem to be working fine, however when I started coding some jquery in my application, i am unable to call most of jquery methods. For example, I have a div:

<div id="myDiv">
  here is some content here
</div>

When I call:

$(document).ready(function() {
  $("#myDiv").hide();
})

My browser throws the error

$(document).ready is not a function @ http://localhost:3000/assets/application.js?body=1:11

Something to note, when I write the js without $(document).ready() underneath the div like this

<div id="myDiv">
    here is some content
</div>
<script type="text/javascript" charset="utf-8">
    $("#myDiv").hide();
</script>

my browser throws the error

$("#myDiv") is null @ http://localhost:3000/:57

Here is the interesting part. When I remove the # and write it like

$("myDiv").hide();

It WORKS!! No errors. Why? I don't know. But when I change it to $("myDiv").addClass("anotherClass"); or anything fancy, i get the error again

$("myDiv").addClass is not a function @ http://localhost:3000/:57

I have no other javascript errors. Any idea why this would be happening? How can I fix this?

I already have gem 'jquery-rails' added in my gem file.

Here is my application.js file

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file. // require_tree 
//
//= require jquery
//= require jquery_ujs
//= require prototype
//= require bootstrap-alerts-1.3.0
//= require bootstrap-dropdown-1.3.0
//= require bootstrap-modal-1.3.0
//= require bootstrap-twipsy-1.3.0
//= require bootstrap-popover-1.3.0
//= require bootstrap-scrollspy-1.3.0
//= require bootstrap-tabs-1.3.0

$(document).ready(function() {
  $("#myDiv").hide();
})

I tried removing all the bootstrap js files btw, had no affect. It is clearly loading jQuery.

Any clues on how to get jQuery working normally?

---

If you're intentionally using both jquery and prototype you'll need to noConflict one of them; you're loading prototype after jQuery, so redefining the $ function.