Rails 4-如何在一个视图中保存来自不同下拉菜单的选择并将其传递给控制器​​以接收相应的数据

Question

I'm very new to Rails and have just started to create my first app. this question may sound a little weird.

So i have two drop down menus, Year and Region, they each have some selections. i have an articles controller and model to store some info. I'm trying to make this action work:

first make a selection from "Year", say 2014. As soon as i click on 2014 i want to display all the articles from the database with the year 2014

then, while the "Year" dropdown menu is still in 2014, I make a selection in the "Region" dropdown menu, say US, and have the view display articles that belongs to 2014 and US.

is it possible to do all the above without using ajax?

here's my view code for articles/index

<!-- Region -->
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Region
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><%= link_to "All Regions", ?????_article_path(???) %></li>
    <% @articles.each do |article| %>
        <li>
            <%= link_to article.region, ?????_article_path(???)%>
        </li>
    <%end%>
  </ul>
</div>

<!-- Years -->
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Year
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><%= link_to "All Years", ?????_article_path(???) %></li>
    <% @articles.each do |article| %>
        <li>
            <%= link_to article.year, ?????_article_path(???)%>
        </li>
    <%end%>
  </ul>
</div>

here's my ArticlesController , it just have one index method

class ArticlesController < ApplicationController

def index
    @articles = Article.all
end

So i thought about putting another method in there called selection but i'm not sure how to pass the second dropdown menu's selection.

Answer 1

If you want to actively get the articles from the database, you need AJAX. In case you are OK with loading the articles together with the view, you can simply store them as a pre-fetched JSON object like this:

<script>
   var articles = <%= raw @articles.to_json %>;alert(articles);
</script>

And then either manually go through this JS object.

Tip: to have more control over displaying and rendering of JS objects, install backbone.js ( http://backbonejs.org/ ), install backbone.js query ( https://github.com/davidgtonge/backbone_query ) make a articles Backbone model (tutorials on backbone.js page are really simple and helpful), articles_collection Backbone collection, query it the way you want, and then make HTML code via Javascript and paste it on the page. I prefer using Backbone.js underscore.js templates for that, they are an excellent tool to master.