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小时内尝试了很多解决方案，但似乎没有任何效果，而且大部分的方法都已过时了。我不经常寻求帮助，但这让我很难过。

修改

如前所述，控制器出现以用于link_to，但在提交表单时页面仍然令人耳目一新。感谢。

ANSWER

多亏了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')，您也可以执行$('#46')之类的操作。如果peak.id会发生变化（看起来像这样），你会遇到与link_to类似的问题，你可能需要找出一些其他方法来定位该图像。

对于form_for工作但不是form_for的首要问题，update正在提交控制器中的redirect_to user_path操作，该操作只对{{1}说（我没有意识到你可以不传递一个用户对象，但它显然适用于你的link_to）。您需要添加一个respond_to块并在其中为js请求呈现show.js.erb。以下是未经测试但显示的一般想法。

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

页面仍然刷新form_for远程true Rails 5

1 个答案: