Joel's Blog

Rails (2.x) Ajax Update Select List in a form (using Jquery)

Ok, assuming you read post #1, this is the jQuery option. If you havent read my previous post please do so now.

Before we start, note I run jQuery in no conflict mode so I can use prototype sometimes for existing code. To do this, I do:

<script type="text/javascript">
  var $j = jQuery.noConflict();
</script>

If you dont need no conflict mode, you can just remove the j after each $ in the examples below

Im going to go through the steps that are differnt

Step 1 - No change

Step 2 - No need for the onchange, remove it this time and add the jQuery Listener

From:

   <%= f.select :brand_id,
     options_from_collection_for_select(@all_brands, 'id', 'name', @brand_report_source_credential_key.brand_id),{},
    :onChange => remote_function(:url=> {:action=> :credential_list_for_brand},
                                 :with=> "'brand_id=' + this.value" )  %>

To:

   <%= f.select :brand_id,
     options_from_collection_for_select(@all_brands, 'id', 'name', @brand_report_source_credential_key.brand_id),{}  %>

Add:  (to appliation.js or your other .js file)

jQuery.ajaxSetup({
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})


$j(document).ready(function() {
    $j("#brand_report_source_credential_key_brand_id").change(function(){
      $j.post("/brand_report_source_credential_keys/credential_list_for_brand", {"brand_id":$j(this).val()}, function(result) {
      });
    });
   
})

Step 3 - No Change

 

Step 4 - Remove the rjs file and add credential_list_for_brand.js.erb

$j("#source_credential_list").html("<%= escape_javascript(render(:partial => 'source_credential_list')) %>");

Thats it, jQuery is cool also!

Rails (2.x) Ajax Update Select List in a form (using Prototype and RJS)

You have a form, the form has multiple select drop down boxes, some of them are dependant on choices selected in other boxes, what do you do?

If you have a simple data set, you can go the client side route which is explained very nicely by Ryan Bates in his screencast http://railscasts.com/episodes/88-dynamic-select-menus

If you have a complex data set and you need to refresh from the server side I could not find any good examples. So I spent a good chunk of a Sunday figuring out how to do this. This blog is a demo of how I figured out how to do it using Rails 2.x and RJS. I will try next weekend for the Rails 3 and UJS/Jquery approach.

In my example, im using 3 objects:

Brand - the brand, this is the data in the first select box

SourceCredential - a list of credentials relevant to a brand, this is the field were updating via ajax

BrandSourceCredentialKey - this is the object im trying to create, it relates to a Brand and SourceCredential

Step 1 - Move the select you want to update into a partial, wrap it in a span, and use fields_for around it, instead of form_for. The reason I do this is that the form is not available on the ajax update. (_source_credential_list.html.erb)

    <% fields_for(@brand_report_source_credential_key) do |ff|  %>
      <%= ff.select :source_credential_id , options_from_collection_for_select(@applicable_source_credentials,'id','credential_display_name')%>
    <% end %>  

   <%= f.label :source_credential_id %><br />
    <span id="source_credential_list">
        <%= render :partial => 'source_credential_list' %>
    </span>

Step 2 - add an onchange listener to the brand select

   <%= f.select :brand_id,
     options_from_collection_for_select(@all_brands, 'id', 'name', @brand_report_source_credential_key.brand_id),{},
    :onChange => remote_function(:url=> {:action=> :credential_list_for_brand},
                                 :with=> "'brand_id=' + this.value" )  %>

 

Step 3 - add the remote function

def credential_list_for_brand
   brand = Brand.find(params[:brand_id])
   @applicable_source_credentials = brand.source_credentials
   @brand_report_source_credential_key = BrandSourceCredentialKey.new
    respond_to do |format|
        format.js
    end

 end

 

Step 4 - add the rjs (credential_list_for_brand.rjs)

 

page.replace("source_credential_list", :partial => "source_credential_list", :object => @applicable_source_credentials)

 

Thats  it, this should work for you now!