CODEWITHSUNDEEP
ruby-on-railsselecttagslink-to
Vasseurth
Vasseurth

Reputation: 6486

Make a Select Box that Calls a Method

I have a rails app with working reports that have tags. In the Report/Index.html.erb I want the user to be able to sort the reports by selecting a tag. They may only select one tag at a time so I feel that a select box would work best. I currently have this:

<%= select("preferences", :tag_with, 
 ["Politics", "Technology", "Entertainment", "Sports", "Science", "Crime", 
 "Business", "Social", "Nature", "Other"], :prompt => "Filter Feed by:" )%>

I have a working preferences controller with a method call tag_with that updates the current tag. This code, however, only generates the select box. I want it to be that when the user selects one of the tags, it calls the tag_with method from the preferences controller.

I generated a series of link_to lines that complete the task, however I would really like a select box.

<%= link_to "Politics", :action => "tag_with", :tag => "Politics", :controller =>"preferences" %>
<%= link_to "Entertainment", :action => "tag_with", :tag => "Entertainment", :controller =>"preferences" %>
<%= link_to "Science", :action => "tag_with", :tag => "Science", :controller =>"preferences" %>
<%= link_to "Technology", :action => "tag_with", :tag => "Technology", :controller =>"preferences" %>

And so on for each tag. This works fine but is bulky and undesirable. Is there a way to do the same thing through a select box?

Upvotes: 1

Views: 2747

Answers (1)

Andrew
Andrew

Reputation: 43123

In your reports.js.coffee file, or whatever other js file you want.

jQuery ->
  $('select#preferences').change ->
    $.get 'preferences/tag_with',{ term: $('option:selected', this). val() }

Or, if you want to use regular javascript:

$(function(){
  $('select#preferences').change( function() {
    $.get('preferences/tag_with',{term: $('option:selected',this).val()});
  });
});

A link is a GET request. The jQuery .change() method fires whenever someone makes a change. The $.get method sends a GET request to a URL and can pass data (the second argument). This data becomes your params hash, so in the example above you would get:

params[:term] #=> the value attribute of whatever option was selected by the user

See the jQuery docs on .change() and $.get() for more help.

Update

For this to refresh the page, the easiest thing would be to extract the table that you want changed into a partial, let's assume it's called _report.html.erb. The partial should look something like this:

<div id="report">
  <%= render @report %>
</div>

*Note: render @report is just short for render :partial => 'report'. See http://guides.rubyonrails.org/layouts_and_rendering.html*

In your preferences controller, tag_with option you should be sure to set the @report object (or whatever else is delivering the data to your partial).

Then you should make a file called views/preferences/tag_with.js.erb and put something like this in it:

$('div#report').html('<%= escape_javascript( render @report ) %>');

This will update the report container with the new content.

Upvotes: 1

Related Questions