Application.js file not in scope

Anyone ever have this issue - I am not able to call any JS from any page within my Rails app that is located in my application js file. I can execute code in an external file OR embedded in the page but not I'm that file. I'm stumped. Any ideas. I'm trying to access jQwery btw.

Here's my application.html.erb

<%= javascript_include_tag "jquery.jeditable" %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" %>
<%= javascript_include_tag "http://use.typekit.com/jdj1xqp.js" %>
<%= javascript_include_tag :defaults %>

Here's the output

<script src="/javascripts/jquery.jeditable.js?1306352056" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://use.typekit.com/jdj1xqp.js" type="text/javascript"></script>

<script src="/javascripts/prototype.js?1305685037" type="text/javascript"></script>
<script src="/javascripts/effects.js?1305685037" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1305685037" type="text/javascript"></script>
<script src="/javascripts/controls.js?1305685037" type="text/javascript"></script>
<script src="/javascripts/rails.js?1305685037" type="text/javascript"></script>
<script src="/javascripts/application.js?1307485399" type="text/javascript"></script>

Here's my application.js

    // Place your application-specific JavaScript functions and classes here
    // This file is automatically inclu开发者_JS百科ded by javascript_include_tag :defaults
    $(document).ready(function(){

   $("#big-search-box").bind("keyup", function() {
         $("#big-search-box").addClass("loading"); // show the spinner
         var form = $("#live-search-form"); // grab the form wrapping the search bar.
         var url = "/schools/find"; // live_search action.  
         var formData = form.serialize(); // grab the data in the form  
         $.get(url, formData, function(html) { // perform an AJAX get
           $("#big-search-box").removeClass("loading"); // hide the spinner
           $("#live-search-results").html(html); // replace the "results" div with the         results
         });
      });
   });

Simple problem, you are loading jquery:

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" %>

and prototype:

<script src="/javascripts/prototype.js?1305685037" type="text/javascript"></script>

These are going to butt heads badly. You need to call jQuery.noConflict

Then you need to change any jquery code to use jQuery. rather than $.

OR, you need to remove anything that uses prototype, which is every default rails js file.

Your application.js should be

jQuery(document).ready(function(){
    jQuery("#big-search-box").bind("keyup", function() {
        jQuery("#big-search-box").addClass("loading"); // show the spinner
        var form = jQuery("#live-search-form"); // grab the form wrapping the search bar.
        var url = "/schools/find"; // live_search action.  
        var formData = form.serialize(); // grab the data in the form  
        jQuery.get(url, formData, function(html) { // perform an AJAX get
            jQuery("#big-search-box").removeClass("loading"); // hide the spinner
            jQuery("#live-search-results").html(html); // replace the "results" div with the         results
        });
    });
});

There is a jQuery shortcut to re-alias the $, but this is a clearer approach.