jquery - 页面仍在刷新 form_for 远程 true Rails 5

Question

对 Rails 非常陌生，我遇到的问题是:我有一个页面是一长列复选框，我将其更改为图标网格，下面有复选框和标签；如果选中该框，我希望将图标图像替换为另一个图标图像，但我的同学坚持使用原始形式，不想玩得很好。我可以获得用于测试的 link_to 帮助程序，但不能获得表单。

相关代码:

#users_controller
class UsersController < ApplicationController

  def show
    @user = User.find(params[:id])
    @peaks = Peak.all.to_a
    @idx = 0
    @rng = 10
    respond_to do |format|
      format.html 
      format.js
    end
  end

  def edit
  end

  def update
    @user = current_user
    if @user.update(user_params)
      redirect_to user_path
    else
      redirect_to root_path
    end

  end

  private
    def user_params
      params.require(:user).permit(peak_ids:[])
    end

end

测试部分:

#_testajax.html.erb
<%= image_tag("badges/snow.png", :class => "no-img-circle center-block", 
height: 50, width: 50)%>
<h1>Hi J</h1>

展示页面:

<div class="container">
 <div class="col-md-7">
    <%= @user.email %>
    <h3>You have climbed the following peaks:</h3>

    <ul>
      <% for peak in @user.peak_ids do %>
        <li><%= Peak.find(peak).name %></li>
      <% end %>
    </ul>

    <% total_ascent = 0 %>
    <% for peak in @user.peak_ids do %>
      <% total_ascent += Peak.find(peak).ascent %>
    <% end %>

    <h3>You have climbed a total of <%= total_ascent %> feet!</h3>

    <% total_climbed = @user.peak_ids.length %>
    <h3>You have climbed <%= (total_climbed/46.0*100).round %>% of the peaks!</h3>

    <h3>Add more climbs</h3>
<div class="container">
    <%= form_for current_user, :remote => true do |f| %>
      <!-- I kept the form_for construct, but changed the logic[here @peaks is an array!]  J. -->
        <% 5.times do %>
          <div class="row">
            <% @peaks.slice(@idx,@rng).each do |peak| %>
          <div class="col-md-1 small text-nowrap">
            <%= image_tag("badges/snow.png", :class => "no-img-circle center-block", :id => peak.id, height: 50, width: 50)%>
            <p><!-- paragraph tag needed to get the checkbox and text beneath the image N. -->
            <%= check_box_tag "user[peak_ids][]", peak.id, current_user.peaks.include?(peak) %>
            <%= peak.name %>
            </p>
          </div>
        <% end %>
      </div>
      <% @idx += @rng %><!-- instance variables for loop control N. -->
    <% end %>

  <p><%= f.submit %></p>
<% end %>
</div>
<%= link_to "Test", user_path, remote: true %>
<div id="test" style="display:none;"></div>
</div>  

  <div class="col-md-5">
    <br>
    <br>
    <br>
    <% if total_ascent > 50000 %>
     <%= image_tag 'badges/chevron-20.png', :size => "130x130" %>
      <p>50,000 ft!</p>
    <% end %>

    <% if total_climbed > 22 %>
      <%= image_tag 'badges/chevron-6.png', :size => "130x130" %>
      <p>Half way to 46!</p>
    <% end %>

    <% if @user.peak_ids.include? 1%>
      <%= image_tag 'badges/chevron-11.png', :size => "130x130" %>
      <p>Highest point in New York State!</p>
    <% end %>  

    <% if total_climbed == 46 %>
      <%= image_tag 'badges/002-crown.png', :size => "130x130" %>
      <p>You've climbed all 46 peaks!</p>
    <% end %>

  </div>
</div>

show.js.erb 文件:

$('#test').html("<%= j (render 'testajax') %>"); <!-- works -->
$('#test').slideDown(350); <!-- works -->
$('edit_user_1').html('<%= j (render "testajax") %>') <!-- not working -->

$('#46').attr( "src" , "<%= image_path "badges/chevron-10.png", :id => "46" %>" ); <!-- works -->

以及生成的 HTML 片段:

<div class="container">
<form class="edit_user" id="edit_user_1" action="/users/1" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" />

      <div class="row">
          <div class="col-md-1 small text-nowrap">
            <img class="no-img-circle center-block" id="1" height="50" width="50" src="/assets/badges/snow-722513de9cdd817c26362e051cf1c9111e32888cc6be5b89b99855bbb46f3c88.png" alt="Snow" />
            <p><!-- paragraph tag needed to get the checkbox and text beneath the image N. -->
            <input type="checkbox" name="user[peak_ids][]" id="user_peak_ids_" value="1" checked="checked" />
            Mt. Marcy
            </p>
          </div>
    .
    .
    .
          <div class="col-md-1 small text-nowrap">
            <img class="no-img-circle center-block" id="46" height="50" width="50" src="/assets/badges/snow-722513de9cdd817c26362e051cf1c9111e32888cc6be5b89b99855bbb46f3c88.png" alt="Snow" />
            <p><!-- paragraph tag needed to get the checkbox and text beneath the image N. -->
            <input type="checkbox" name="user[peak_ids][]" id="user_peak_ids_" value="46" />
            Couchsachraga Peak
            </p>
          </div>
      </div>


  <p><input type="submit" name="commit" value="Update User" data-disable-with="Update User" /></p>
</form></div>
<a data-remote="true" href="/users/1">Test</a>
<div id="test" style="display:none;"></div>
  </div> 

过去 24 小时内我尝试了许多解决方案，但似乎没有任何效果，而且大多数操作指南都已过时。我不经常寻求帮助，但这让我感到困惑。

编辑

如前所述， Controller 似乎适用于 link_to，但当我提交表单时，页面仍在刷新。谢谢。

回答

多亏了 Simple Lime，我终于能够让它工作了，在最初误读之后，以下内容应该进入更新操作:

  def update
    @user = current_user
    respond_to do |format|
      if @user.update(user_params)
        format.html { redirect_to user_path }
        format.js { render action: :show, format: :js } #has to go here beause of .update()
      else
        format.html { redirect_to root_path }
      end
    end
  end

Answer 1

$('edit_user_1').html('<%= j (render "testajax") %>') <!-- not working -->

在那一行中，您错过了 octothorpe，因此您使用 jQuery 选择标签名称为“edit_user_1”的元素(类似于通过执行 $('p') 选择页面上的所有段落标签) .

$('#edit_user_1').html('<%= j (render "testajax") %>') <!-- should work -->

除非我在问题中遗漏了一些似乎是唯一不适合您的东西？

注意:这仅适用于一名用户，使用 $("#edit_user_#{@user.id}") 应该使其适用于所有用户，您也可以执行类似的操作$('form.edit_user') 如果页面上只有一个。如果 peak.id 发生变化(看起来确实如此)，您将遇到与 $('#46') 类似的问题，您可能需要弄清楚寻找其他方式来定位该图像。

对于 link_to 工作但 form_for 不工作的总体问题，form_for 正在提交给 update Controller 中的操作仅表示 redirect_to user_path (我不知道您可以在不向其传递用户对象的情况下执行此操作，但它显然适用于您的 link_to)。您需要添加一个respond_to block 并在其中渲染show.js.erb以用于js请求。以下内容未经测试，但显示了总体思路。

respond_to do |format|
  format.html { redirect_to user_path }
  format.js { render action: :show, format: :js }
end