【问题标题】:Rails - delete li element with AjaxRails - 使用 Ajax 删除 li 元素
【发布时间】:2016-04-17 00:04:46
【问题描述】:

我有一个用户列表,我想通过单击同一行上的“删除”链接来删除元素。

观看次数:

# users/index.html.erb
<ul class="users">
  <%= render @users %>
</ul>

# users/_user.html.erb
<li id="user-<%= user.id %>">
  <%= link_to user.email, user %>
  <% if current_user.admin? %>
      <%= link_to "delete", user, remote: true, method: :delete, data: { confirm: "You sure?" } %>
  <% end %>
</li>

用户控制器:

# users_controller.rb
def destroy
  User.find(params[:id]).destroy
  flash[:success] = "User deleted"
  respond_to do |format|
    format.html { redirect_to users_url }
    format.js
  end
end

删除列表元素的javascript是:

# users/destroy.js.erb
$("li#<%= user.id %>").remove();

点击时什么都没有发生,但在页面刷新时资源被正确销毁。检查服务器的 LOG 我看到以下错误:

在 40 毫秒内完成 500 次内部服务器错误(ActiveRecord:5.0 毫秒)

ActionView::Template::Error(未定义的局部变量或方法user' for #<#<Class:0x0000000851d300>:0x00000008e8e7e0>): 1: $("li#<%= user.id %>").remove(); app/views/users/destroy.js.erb:1:in _app_views_users_destroy_js_erb___2066095411338793994_74738360'
app/controllers/users_controller.rb:46:in `destroy'

能否请您帮助我了解错误在哪里以及为什么“用户”未定义?谢谢

编辑

我知道这个问题有很多问答类似,我实际上是根据这些问题构建我的代码。尽管如此,我还是被困住了,我需要支持。请不要将问题标记为重复。

【问题讨论】:

    标签: javascript ruby-on-rails ajax


    【解决方案1】:

    您的 destroy.js.erb 模板未获取用户变量,因为它未定义。试试:

    def destroy
     @user = User.find(params[:id])
     @user.destroy
    
     respond_to do |format|
      format.html { redirect_to users_url }
      format.js
     end
    end
    

    $("li#<%= @user.id %>").remove();
    

    之所以可行,是因为 rails 通过设置带有 @ 前缀的变量将数据从控制器传递到视图。所以你将@user设置为你从数据库中获取的模型的一个实例,然后你在那个模型上调用了.destroy,它被删除了,然后你渲染了你的destroy.js模板,其中也有@user,并且您删除了匹配“li#233”选择器或任何 id 整数的列表项

    【讨论】:

    • 嗨@Kirka121 感谢您的回答和解释。使用您的代码,我实际上没有收到错误,但元素并没有消失,我仍然需要重新加载页面才能看到差异。
    • $("li#user-").remove();你得到了错误的 ID。
    • 谢谢@leiliu 在 Kirka121 的回答中没有看到那个错字,现在一切正常
    【解决方案2】:

    您没有定义 user 变量。

    您可以将@user_id 保存在一个变量中,以便在您的js.erb 中访问。像这样:

    def destroy
      @user_id = params[:id]  
      ...
    end
    

    然后:

    $("li#&lt;%= @user_id %&gt;").remove();

    【讨论】:

      猜你喜欢
      • 2012-10-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-11-24
      • 2020-09-13
      • 1970-01-01
      相关资源
      最近更新 更多