how to have onchange in collection_select with jquery

Question

I am using jquery on my html page and want to have an onchange event on a collection_select.

If I add <%= javascript_include_tag :defaults %> then my jquery code does not work.

Basically I have a collection_select as follows:

<%=collection_select(:product, 'prod_name', @prods, :id, :prod_name, 
{:prompt => 'Select Product'},{:onchange =>  remote_function(:url => 
{:action => 'volume_or_quant'}, :with => "'id=' + this.value")})%>

Then I have a select tag and a text field:

<%=select_tag :volume, options_for_select(["", "1/8 lb", "1/4 lb", "Single", 
"Multi 5" ], "N/A") %>
<%= text_field_tag :quantity, "", :size=>"4"%>

When an option is selected from the collection_select I want to go back to my action and check whether it has volume or unit in the DB. Based on which, the above selectbox/textbox will be enabled.

right now my action looks like:

def volume_or_quant
    @product = Product.find(params[:id])
    puts "Value: " + @product.volume        
end

However, when I select something...nothing happens. Right now I do not have default javascripts.

is what I'm trying to do require the default prototype javascript? or can it be done with jquery?

Answer 1

Yes, the remote_function requires the Prototype libraries be included. It can be done with jQuery, but not with the remote_function helper as you are attempting.

To get jQuery working:

The problem that occurs when you include the defaults, is that Prototype tries to use $, and so does jQuery. You can use jQuery's noConflict mode to fix this.

Include the defaults like you attempted to at first, but then follow this advice to get jQuery working again:

You can do a few things, but if you use a local copy of jQuery, add this as the very last line (and include jQuery after the defaults in the javascript_include_tag call):

jQuery.noConflict();

If you are using the Google CDN, do this:

<%= javascript_include_tag :defaults, "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" %>
<script type="text/javascript"> jQuery.noConflict() </script>

Then, make sure all your jQuery code is surrounded with either this (for any code that used to live in document.ready:

// $ = Prototype
jQuery(document).ready(function($){
    // $ = jQuery
});

// or shorthand:
jQuery(function($){
    // $ = jQuery
});

Or just use this (Creates a private scope where $ = jQuery):

// $ = Prototype
(function($){
    // $ = jQuery
})(jQuery);

Answer 2

By default rails is configured or include to work with prototype not with jquery, the code <%= javascript_include_tag :defaults %> includes prototype scripts to your html at runtime. There are some plugins for rails like jRails to enable jQuery with rails but it doesn't seamlessly integrates with rails yet.