使用ajax创建成功表单后呈现部分

Question

我的控制器代码：

class HitChallengesController < ApplicationController

  def create
    game = Game.find(params[:id])
    suite_id = Suite.find_by(suite_number: params[:hit_challenge][:suite_id], game_id: game.id).id
    @hit_challenge = HitChallenge.new(game_id: game.id, suite_id: suite_id, title: params[:hit_challenge][:title])
    if @hit_challenge.save && request.xhr?
      respond_to do |format|
        format.json { render json: @hit_challenge}
      end
    else
      redirect_to games_show_path(game)
    end
  end
end

查看部分：

  <%if @game.has_hit_challenge %>
    <h4>Hit Challenges: </h4>

    <%if @hit_challenges.count > 1%>
      <% @hit_challenges.each do |h|%>
        <li>
        <%= "Suite #{h.suite.suite_number}, #{h.title}:" %>
        <%= link_to "Status", hit_status_path(h) %>
        <%= link_to "Play", play_hit_challenge_path(h) %>
        <%= form_for h, url: delete_hit_challenge_path(h), method: :delete do |f| %>
          <%= f.hidden_field :hit_challenge_id, value: h.id %>
          <%= f.submit "Delete" %>
        <%end%>
        </li>
      <%end%>
    <%else%>
      <li>
      <%= "Suite #{@hit_challenges.first.suite.suite_number}, #{@hit_challenges.first.title}:" %>
      <%= link_to "Status", hit_status_path(@hit_challenges.first) %>
      <%= link_to "Play", play_hit_challenge_path(@hit_challenges.first) %>
      <%= form_for @hit_challenges.first, url: delete_hit_challenge_path(@hit_challenges.first), method: :delete do |f| %>
        <%= f.hidden_field :hit_challenge_id, value: @hit_challenges.first.id %>
        <%= f.submit "Delete" %>
      <%end%>
      </li>
    <%end%>
  <%end%>

其余观点：

<%if is_admin%>
  <div class='create-challenges'>
    <p>
      <%=form_for :suite, url: create_suite_path(:game_id => @game.id) do |f| %>
        <%= f.label 'Suite Number:' %>
        <%= f.text_field :suite_number %>
        <%=f.submit "Create" %>
      <%end%>
    </p>
    <p>
      <%=form_for :pitch_speed , url: create_pitch_speed_path(:game_id => @game.id) do |f|%>
        <%=f.label 'Create Pitch Speed Challenge' %>
        <%=f.select :suite_id, options_for_select(@game.suites.map {|s| s.suite_number}), {include_blank: 'Suite number?'} %>
        <%=f.label "Title:" %>
        <%=f.text_field :title %>
        <%=f.label "Min Speed:" %>
        <%=f.text_field :min_speed %>
        <%=f.label "Max Speed:" %>
        <%=f.text_field :max_speed %>
        <%=f.submit 'Create' %>
      <%end%>
    </p>
    <p>
      <%=form_for :prop_bet, url: create_prop_bet_path(:game_id => @game.id) do |f| %>
        <%= f.label 'Create Prop Bet:' %>
        <%= f.select :suite_id, options_for_select(@game.suites.map {|s| s.suite_number}), {include_blank: 'Suite number?'} %>
        <%= f.label "Title:" %>
        <%= f.text_field :title %>
        <%=f.submit "Create" %>
      <%end%>
    </p>
    <p>
      <%=form_for :hit_challenge, url: create_hit_challenge_path, :remote => true do |f| %>
        <%= f.label 'Create Hit Challenge:' %>
        <%= f.select :suite_id, options_for_select(@game.suites.map {|s| s.suite_number}), {include_blank: 'Suite number?'} %>
        <%= f.label "Title:" %>
        <%= f.text_field :title %>
        <%=f.submit "Create" %>
      <%end%>
    </p>
  </div>
  <%= link_to "Edit Game", games_edit_path(@game) %>
<div class='challenge-lists'>
  <div class='hit-list'>
    <%=render 'hit_challenges_list', locals: {@hit_challenges => @hit_challenges, @game => @game} %>
  </div>
  <div class='prop-list'>
  <%if @game.has_prop_bet%>

    <h4> Prop Bets:</h4>

    <%if @prop_bets.count > 1 %>
      <% @prop_bets.each do |prop| %>
        <li>
          <%= "Suite #{prop.suite.suite_number}, #{prop.title}:" %>
          <%=link_to "Status", prop_status_path(prop) %>
          <%=link_to "Play", show_prop_bet_path(prop) %>
          <%=link_to "Edit", edit_prop_path(prop) %>
          <%= form_for prop, url: delete_prop_bet_path(prop), method: :delete do |f| %>
            <%= f.hidden_field :prop_id, value: prop.id %>
            <%= f.submit "Delete" %>
          <%end%>
        </li>
      <%end%>
    <%else%>
      <li>
      <%="Suite #{@prop_bets.first.suite.suite_number}, #{@prop_bets.first.title}:" %>
      <%= link_to "Status", prop_status_path(@prop_bets.first) %>
      <%= link_to "Play", show_prop_bet_path(@prop_bets.first) %>
      <%=link_to "Edit", edit_prop_path(@prop_bets.first) %>
      <%= form_for @prop_bets.first, url: delete_prop_bet_path(@prop_bets.first), method: :delete do |f| %>
        <%= f.hidden_field :prop_id, value: @prop_bets.first.id %>
        <%= f.submit "Delete" %>
      <%end%>
      </li>
    <%end%>
  <%end%>
  </div>
  <div class='pitch-list'>
    <%if @game.has_pitch_speed %>
      <h4> Pitch Speed Challenges </h4>
      <%if @game.pitch_speeds.count > 1 %>
        <%@pitch_speeds.each do |pitch| %>
          <%= "Suite #{pitch.suite.suite_number}, #{pitch.title}:" %>
          <%=link_to "Play", play_pitch_speed_path(pitch) %>
        <%end%>
      <%else%>
        <%= "Suite #{@game.pitch_speeds.first.suite.suite_number}, #{@game.pitch_speeds.first.title}:" %>
        <%=link_to "Play", play_pitch_speed_path(@game.pitch_speeds.first) %>
      <%end%>
    <%end%>
  </div>
</div>
  <p>
    <li><%= link_to "Add Home Players", add_home_player_path(@game)%></li>
    <li><%= link_to "Add Away Players", add_away_player_path(@game)%></li>
  </p>
  <p>
    Total Hits:
    <%=form_for @game, url: update_game_hits_path do |f| %>
      <%=f.text_field :total_hits%>
      <%=f.submit "Update Hits" %>
    <%end%>
  </p>
<%end%>

最后是我的js文件：

$(document).ready(function(){
  $('.create-challenges').on('submit', function(e){
    e.preventDefault();
    $.ajax({
      url: $(this).attr('action'),
      method: $(this).attr('method'),
      data: $(this).serialize()
    }).done(function(response){
      data = '<%= j(render partial: "hit_challenges_list")%>';
      console.log(data);
      $(".hit-list li").append(data);

    }).fail(function(){
      console.log('you fail in life')
    })
  })

我正在尝试从该表单创建一个hit_challenge，然后尝试将其附加到hit_challenges列表中，如上所示。部分工作正常，我可以看到hit_challenges好了。

ajax调用通过，记录已创建，但我无法找出附加部分。当我试图将新创建的记录数据传递给部分时，我觉得有些东西正在破坏......附加的是'＆lt;％= j（render partial：“hit_challenges_list”）％＆gt;'，就像红宝石一样里面的代码不起作用

可能是因为我的偏见太多了吗？我尝试在'＆lt;％= j（render partial：“hit_challenges_list”）％＆gt;'中传递本地人但它没有任何区别。顺便说一下，我正在使用rails 4。

编辑：

现在我得到一个奇怪的语法错误，我看不出部分有什么问题，我没有改变任何东西，它在js方法之外工作

SyntaxError（/Users/ddgs89/Desktop/Suite-Success/suite_success/app/views/games/_hit_challenges_list.html.erb:1：语法错误，意外'='，期待关键字_end ... tput_buffer = @output_buffer; = = local_assigns [：] ;; @输出... ...... ^ /Users/ddgs89/Desktop/Suite-Success/suite_success/app/views/games/_hit_challenges_list.html.erb:1：语法错误，意外']'，期待tSTRING_CONTENT或tSTRING_DBEG或tSTRING_DVAR或tSTRING_END ... t_buffer; = = local_assigns [：] ;; @ output_buffer = output_buf ... ...... ^）：   app / views / games / _hit_challenges_list.html.erb：1：语法错误，意外'='，期待keyword_end   app / views / games / _hit_challenges_list.html.erb：1：语法错误，意外']'，期待tSTRING_CONTENT或tSTRING_DBEG或tSTRING_DVAR或tSTRING_END   app / views / hit_challenges / create.js.erb：9：in _app_views_hit_challenges_create_js_erb___1940717404351023775_70144770896860' app/controllers/hit_challenges_controller.rb:8:in create'

create.js.erb

$(document).ready(function(){
  $('.create-challenges').on('submit', function(e){
    e.preventDefault();
    $.ajax({
      url: $(this).attr('action'),
      method: $(this).attr('method'),
      data: $(this).serialize()
    }).done(function(response){
      data = '<%= j(render partial: "games/hit_challenges_list", locals: {@hit_challenges => @hit_challenges, @game => @game})%>';
      console.log(data);
      $(".hit-list li").append(data);

    }).fail(function(){
      console.log('you fail in life')
    })
  })
})

Answer 1

它无法正常工作，因为您尝试在客户端进行服务器端渲染。一种方法是让您的控制器呈现部分并将其提供给客户端，但更好的方法和Rails方法是在form_fors 上使用remote: true选项（不确定是否发布了正确的视图）因为create-challenge CSS类不在你发布的表格中。

在您的创建操作中，您将拥有：

def create
    game = Game.find(params[:id])
    suite_id = Suite.find_by(suite_number: params[:hit_challenge][:suite_id], game_id: game.id).id
    @hit_challenge = HitChallenge.new(game_id: game.id, suite_id: suite_id, title: params[:hit_challenge][:title])
    if @hit_challenge.save && request.xhr?
      respond_to do |format|
        format.json { render json: @hit_challenge}
        format.js
      end
    else
      redirect_to games_show_path(game)
    end
  end

在你的create.js.erb

中

data = '<%= j(render partial: "games/hit_challenges_list")%>';
console.log(data);
$(".hit-list li").append(data);

请告知我是否有效或需要其他说明

<强>更新

您的最终create.js.erb应如下所示：

  data = '<%=j render(partial: "games/hit_challenges_list")%>';
  console.log(data);
  $(".hit-list li").append(data);

您应确保在控制器中的某处设置了@hit_challenges和@game，我删除了传递给partial的实例变量，因为它是多余的，如果您将局部变量传递给部分变量，它必须是一个象征。