文章/答案/技术大牛

发布

社区首页 >问答首页 >Rails 4/ jQuery:需要在表单输入中输入值以自动填充其他输入

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

Stack Overflow用户

提问于 2016-02-12 22:12:33

回答 2查看 126关注 0票数 0

使用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)。

使用Ruby2.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

view/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

最新情况:工作

下面是我为使自动填充开始工作所做的更改。他们可能不是所有的必要，但它的工作，所以这是有意义的。感谢杰夫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的团队”的处理方式，因为它似乎不适合出现在输入中。

jquery

ruby-on-rails

ajax

simple-form

javascript

回答 2

Stack Overflow用户

发布于 2016-02-12 22:55:42

你把url错误地用于那条路线。尝试将ajax更改为：

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

然后在你的控制器里：

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

票数 2

Stack Overflow用户

发布于 2016-02-13 00:05:57

我编辑了上面的一些答案，但实际上有点不正确，所以我重新回答。不过，在正确的轨道上投了赞成票。

在表单中添加一行如下：

= 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_games还包括有问题的TeamGame。但我会把这个练习留给你！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35373079

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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