Question

I’m running a Rails app and using prototype. The script breaks in IE, but works in all other browsers. I appreciate any help in guiding toward a fix for this.

Here’s the problem:
My users sell products and varieties of products. The varieties available are dependent on the product. For example, if we’re talking about fruit, the user might select the product “Apple”, then I need to show him varieties of apples to choose from, rather than all the varieties on the whole site.

I use javascript to limit the dropdown choices for varieties so that they are dependent on the product first selected from the dropdown. So if the user selects the product “apple”, then the variety list dynamically limits itself to only varieties of apples. This works great in all browsers, except of course, IE.

In IE, when I select a product from the dropdown, the script fails and the error message is “Object doesn’t support this property or method”

I believe the problem and solution are explained on the following page if you scroll down to the bottom – the section labeled Native Extensions: http://prototypejs.org/learn/extensions

Unfortunately, I’m not very good with javascript yet and I don’t know exactly how to fix the problem in practice based on the explanation from the prototype page.

Here’s the javascript file in question:

var varieties = new Array();
<% for variety in @varieties -%>
  varieties.push (new Array (<%=h variety.product_id %>, "<%=h variety.name %>", <%=h variety.id %>));
<% end -%>


function collectionSelected(e) {
  product_id = e.getValue();
  options = e.next(1).options;
  options.length = 1;
  varieties.each(function(variety) {
    if (variety[0] == product_id) {
      options[options.length] = new Option(variety[1], variety[2]);
    }
  });
}

Any guidance is much appreciated.

Update

This is the html …

users/edit.html.erb

<% javascript 'dynamic_varieties' %>
  <h2>Edit Your Profile</h2>
    <%= render :partial => 'form' %>  

users/_form.html.erb

<% form_for @user do |f| %>     
  <!-- This dynamically adds a new pair of dropdowns, i.e. product & variety -->
  <p class="addProduct"><%= add_season_link "+ Add another product" %></p> 

  <!-- This is where the product & variety dropdowns are rendered -->
  <div id="seasons">
<%= render :partial => 'season', :collection => @user.seasons %>
  </div>
<% end %>

users/_season.html.erb

  <div class="season">
<% new_or_existing = season.new_record? ? 'new' : 'existing' %>
<% prefix = "user[#{new_or_existing}_season_attributes][]" %>

<% fields_for prefix, season do |season_form| -%>
  <%= error_messages_for :season, :object => season %>
      <div class="eachMarketDrop">
          <p class="marketDrop">
            <!-- This is the product dropdown that triggers the dependent variety dropdown -->
            <label for = "user_product_id">Product:</label> <%= season_form.collection_select :product_id, Product.find(:all, :order =>'name'), :id, :name, {:prompt => "Select Product"}, {:onchange => "collectionSelected(this);"} %>
            <label for="user_variety_id">Variety:</label>
            <!-- This is the variety dropdown that is dependent on the product dropdown -->
            <% varieties = season.product ? season.product.varieties : Variety.all %>
            <%= season_form.select :variety_id, options_from_collection_for_select(varieties, :id, :name, season.variety_id), :prompt => "This is optional" %>
          </p>
      </div>
<% end -%>

Update #2

I installed firebug lite and confirmed that the line throwing the error in IE is:

options = e.next(1).options;

The following variations also throw the same error:
options = $(e).next(1).options
options = e.next(‘select’).options;

Any ideas?

Answer 1

Pullmonkey (http://www.pullmonkey.com/) over at the Rails Forum figured it out. It now works perfectly in all browsers.

The solution was to change

{:onchange => "collectionSelected(this);"}   

to

{:onchange => "collectionSelected($(this));"} %>  

A friend explained it like this:
“this” is a funny word in JS – it can mean a lot of things. In the original code, your collectionSelected method was being passed the event itself. With the $(this), the collectionSelected method is being passed the item that is triggering the event. So in this case, e.next() makes sense, b/c “e” is the product prompt. In the previous case, when “e” was the event, e.next() doesn’t mean anything!