从has_many关联中加载Ajax实例

Question

I have a scenario where a Game has many Achievements . Setup as a todo app I have a form where users create a list of achievements they would like to complete. They first choose the game from and from their the achievements for that game populate below.

The challenge I'm facing is asynchronously gathering the achievements that belong_to that particular game. So if the user selects Halo then all the achievements would load from that select box's change event.

I have a general idea on writing the change event but was wondering how the ajax would be written for this to work to load the achievements.

Models

class User
  has_many :tasks
end

class Task < ActiveRecord::Base
  has_many_and_belongs_to_many :achievements
  belongs_to :user
  belongs_to :game
end

class Game < ActiveRecord::Base
  has_many :tasks
  has_many :achievements
end

class Achievements < ActiveRecord::Base
  has_and_belongs_to_many :tasks
  belongs_to :game
end

Task Form

<%= simple_form_for(@task) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :title %>
    <%= f.input :game_id, as: :select, collection: @games, include_blank: "Select a game", input_html: {class: "game-select"} %>
    <%= f.input :achievement_ids, as: :select, collection: @achievements, include_blank: "Select achievements", input_html: {multiple: true, class: "achievement-select"} %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

JS

$(function() {
  $(".game-select").on("change", function() {
    // Load and insert achievements for game into ".achievement-select" select box
  });
});

Achievements Controller

class AchievementsController < ApplicationController
  def index
    @achievements = Achievement.all
  end

  def show
    @achievement = Achievement.find(params[:id])
  end
end

Answer 1

The select options should, in their value attribute, store the game id. Build this like

<% game_options = [["",""]] + Game.order("name").all.collect{|game| [game.name, game.id]} %>
<%= select_tag "game_id", options_for_select(game_options), :class => "game-select" %>

The game_options variable could be moved into a class method in the Game class, eg called "select_options" or something.

Now when this changes, you can read the game id out of it's value. You could do it like so:

$(function() {

  $(".game-select").on("change", function() {
    if($(this).val() != ""){
      $.getJSON("/achievements", {"game_id": $(this).val()})
        .done(function(data){
          $.each( data.items, function( i, item ) {
            //do something with the json for this achievement
          });
        });
    }
  });

});

EDIT: I made the view code use the more modern rails find syntax, and also made the javascript not do anything if the select is changed to the blank option.

EDIT2: like i said, if we want to send params[:game_id], and get back all the json data just for achievements with that game id, then the controller will need to take those params into account. There's various ways you could do this, some dryer than others. I'm going to do the simplest possible thing, rather than the most extensible thing.

#in Achievements controller
def index
  if params[:game_id]
    @achievements = Achievement.where(:game_id => params[:game_id]).all
  else
    @achievements = Achievement.all
  end
  respond_to do |format|
    format.html { render :action => "index"}
    format.json { render :json => @achievements.to_json }
  end
end

Answer 2

So ...such as we have 'simple_form_for(@task)', it is view form for Task Model.

In my opinion, You could write next in Task Model:

class Task < ActiveRecord::Base
  belongs_to :user
  belongs_to :game
  has_many :achievements, through: :game
end

and after this in TasksController You could use: (updated)

def update
  @task = Task.find(params[:id])    
  @achievements = @task.achievements
  @achievement_ids = @achievements.map { |a| [a.name, a.id] }
end

for use into form.