Rails 4 / jQuery：需要在表单输入中输入值以自动填充其他输入

Question

使用 simple_form，我试图获取一个 id 输入 (team_id) 的条目，以在创建新 team_game 的表单中自动填充几个其他输入（team_city 和 team_name）。我已经完成了我能找到的所有实现，但无济于事（我最近的参考资料：Jquery ajax and controller method）。这对我来说就像流沙，越挣扎，越被推倒。我的代码如下。目前，它在 javascript 中抛出 AJAX 错误。我也在控制台中得到这个：

Started GET "/team_games/populate_team_city_and_name?team_id=1" for ::1 at 2016-02-12 13:28:50 -0800
Processing by TeamGamesController#show as JSON
  Parameters: {"team_id"=>"1", "id"=>"populate_team_city_and_name"}
  TeamGame Load (0.3ms)  SELECT  "team_games".* FROM "team_games" WHERE "team_games"."id" = $1 LIMIT 1  [["id", 0]]
Completed 404 Not Found in 2ms (ActiveRecord: 0.3ms)

ActiveRecord::RecordNotFound - Couldn't find TeamGame with 'id'=populate_team_city_and_name:

所以，除了我的 AJAX 问题之外，我的路由似乎做错了什么（以此为指导：How to add a custom action to the controller in Rails 3）。

使用 Ruby 2.3.0 和 Rails 4.2.5。任何帮助将不胜感激。

models/team_game.rb

class TeamGame < ActiveRecord::Base

  attr_accessor :team_city
  attr_accessor :team_name
  attr_accessor :opposing_team_city
  attr_accessor :opposing_team_name

  belongs_to :team, class_name:  'Team',
                    inverse_of:  :team_games

end

models/team.rb

class Team < ActiveRecord::Base

  has_many :team_games, class_name:  'TeamGame',
                        inverse_of:  :team

end

查看/team_games/_form.html.haml

= simple_form_for @team_game do |f|

  = f.input :team_id,   input_html: { id: 'team-id' }
  = f.input :team_city, input_html: { id: 'team-city' }
  = f.input :team_name, input_html: { id: 'team-name' }

controllers/team_games_controller.rb

def populate_team_city_and_name(team_id)

  @team = Team.where(id: team_id)

  respond_to do |format|
    format.json { render json: @team }
  end

end


private

def team_game_params
  params.require(:team_game).
    permit(:team_id,
           :team_city,
           :team_name,
           :is_home_team,
           :opposing_team_id,
           :opposing_team_city,
           :opposing_team_name,
           :stadium_name
           :game_date,
           :game_time)
end

assets/javascripts/team_games.js

$(document).ready(function() {

  $('#team-id').change(function(e) {
    e.preventDefault();

    var teamId = $('#team-id').val();

    request = void 0;
    request = $.ajax({
      url: 'populate_team_city_and_name',
      type: 'GET',
      dataType: 'json',
      data: { team_id: teamId }
    });

    request.done(function(data, textStatus, jqXHR) {
      if (data.length > 0) {
        $('#team-city').val(data.city);
        $('#team-name').val(data.name);
      } else {
        $('#team-name').val('There is no team with entered Id');
      }
      console.log("Success!!")
    });

    request.error(function(jqXHR, textStatus, errorThrown) {
      console.log("AJAX Error: #{textStatus}");
    });

  });
});

config/routes.rb

resources :team_games do
  member do
    get :populate_team_city_and_name
  end
end

更新：工作中

以下是我为使自动填充正常工作所做的更改。它们可能并非都是必需的，但它确实有效，所以就是这样。感谢 Jeff F. 带领我走上正确的道路。

view/team_games/_form.html.haml（已修改）

= simple_form_for @team_game do |f|

  = f.input :team_id,   input_html: { id: 'team-id' }
  #no-team-with-id-msg There is no team with entered id
  = f.input :team_city, input_html: { id: 'team-city' }
  = f.input :team_name, input_html: { id: 'team-name' }

controllers/team_games_controller.rb（修订）

def populate_team_city_and_name

  @team = Team.where(id: params[:team_id])

  respond_to do |format|
    format.json { render json: @team }
  end

end


private

def team_game_params
  params.require(:team_game).
    permit(:team_id,
           :team_city,
           :team_name,
           :is_home_team,
           :opposing_team_id,
           :opposing_team_city,
           :opposing_team_name,
           :stadium_name
           :game_date,
           :game_time)
end

assets/javascripts/team_games.js（已修改）

$(document).ready(function() {

  $("#no-team-with-id-msg").hide();

  $('#team-id').change(function(e) {

    e.preventDefault();
    var teamId = $('#team-id').val();

    request = void 0;
    request = $.ajax({
      url: '/team_games/populate_team_city_and_name?team_id=' + teamId,
      type: 'GET',
      dataType: 'json'
    });

    request.done(function(data, textStatus, jqXHR) {
      if (data.length > 0) {
        $("#no-team-with-id-msg").hide();
        $('#team-city').val(data[0].city);
        $('#team-name').val(data[0].name);
      } else {
        $("#no-team-with-id-msg").show();
        $('#team-city').val('');
        $('#team-name').val('');
      }
    });

    request.error(function(jqXHR, textStatus, errorThrown) {
      console.log("AJAX Error: #{textStatus}");
    });

  });
});

config/routes.rb（已修改）

get 'team_games/populate_team_city_and_name',
  to: 'team_games#populate_team_city_and_name',
  as: 'populate_team_city_and_name',
  defaults: { format: 'json' }

resources  :team_games
resources  :teams

我的部分路由问题似乎是我之前在资源路由之后有“get”路由，我猜这就是为什么 javascript 'GET' 路由到 team_games#show 操作。

我还更改了消息 “没有输入 id 的团队” 消息的处理，因为它似乎不适合出现在输入中。

Answer 1

您错误地使用了该路由的 url。尝试将您的 ajax 更改为：

request = $.ajax({
  url: 'team_games/' + teamId + '/populate_team_city_and_name',
  type: 'GET',
  dataType: 'json'
});

然后在你的控制器中：

@team = Team.where(id: params[:id])

Answer 2

我对上面的答案进行了一些编辑，但实际上离正确有点太远了，所以我重新回答了。不过，由于它走在正确的轨道上，因此受到了赞成。

在表单中添加一行，例如：

= simple_form_for @team_game do |f|
  = f.input :id, as: hidden, :input_html => { id: 'team-game-id', :value => @team_game.id }
  = f.input :team_id,   input_html: { id: 'team-id' }
  = f.input :team_city, input_html: { id: 'team-city' }
  = f.input :team_name, input_html: { id: 'team-name' }

然后在你的 JS 中：

var teamId = $('#team-id').val();
var teamGameId = $("#team-game-id").val();

{ ... }

request = $.ajax({
  url: '/team_games/' + teamGameId + '/populate_team_city_and_name?team_id=' + teamId,
  type: 'GET'
});

查询参数的原因是因为您无法在 URL 中指定 teamId，除非您创建允许您这样做的路由。成员资格是 TeamGame 模型，而不是团队。或者，您可以指定如下路线：

get '/team_games/:id/populate_team_city_and_name/:team_id' => 'team_games#populate_team_city_and_name'

但按原样，您没有匹配的路线。但是查询参数会显示在params中。

然后在你的控制器中：

@team = Team.find params[:team_id]

您可能还想确保该 Team 不仅存在，而且 Team.team_games 包含有问题的 TeamGame。但我会把这个练习留给你！