How to get a <select> box to change the url?

rubyonrails-talk
1

Hello all,

I have a list of games that I want to filter by # of players and category. I want to be able to list either or both parameters and have it work. I don't know how to make the players <select> box generate the GET requests I want (see below)

The urls would look like the following. As you can see, right now I don't want to have to specify all the parameters

/games?players=2&category=3 /games?category=3 /games?players=2 /games

The _filter template includes a <select> box for the # of players, and links for the categories. The categories generate the right urls if they use the following helper.

  def filtered_games_path (p)     temp = params.dup

    p.each do |key, value|       temp[key] = value     end

    games_path(temp)   end

So, something like this: <%= link_to category.name, filtered_games_path (:category => category.id ) %> would translate to either /games?category=N or /games?players=M&category=N, depending on whether or not players was already one of the parameters.

But now I need to do the same thing for a select box. I want it to make a get request as soon as it is changed -- so it's just a fancy link that allows you to change which # you are sending for the players variable.

How should I do this? I can do it with javascript, but I want to generate the url with rails, so I don't have to repeat the code that merges the parameters.

Thanks, and let me know if that doesn't make sense :slight_smile:

2

I think the only way you'll get any reasonably consistency is using JavaScript. Select boxes don't work as hyperlinks because they don't make any sort of request to the server. They do however support JavaScript events such as onchange. And, even this is on the verge of being obsoleted by observers inside JavaScript files. I believe that technique is referred to as "Unobtrusive JavaScript."

3

Thanks for the confirmation. I guess the only way of doing it is something like the following.

Then, I can write a javascript component (with jquery, much like you described to replace VALUE with the selected value and submit the url).

$('select.link').change(function () {

	var value = $(this).val();

	var location = $(this).attr('href').replace(/VALUE/, value);

	window.location = location;

});

It still seems kind of kludgey to have to use a string hook like that. Any suggestions?

Thanks for your help!

~sean