Ajax 仅在 Ruby 应用程序中刷新时删除

Ajax only deletes upon refresh in Ruby app

本文关键字：刷新 删除 应用程序 仅在 Ruby Ajax      更新时间：2023-09-26

我正在尝试在 Rails 中创建一个待办事项列表应用程序，该应用程序由许多待办事项列表组成，每个列表都有尽可能多的待办事项。当我尝试使用 Ajax 销毁已完成的待办事项时，我必须在它消失之前刷新页面。 我是Rails和Javascript的新手，所以任何想法将不胜感激。

这是我的项目销毁Javascript文件：

<% if @item.destroyed? %>
$('#item-' +<%= @item.id %>).hide();
<% else %>
$('#item-' +<%= @item.id %>).prepend("<div class='alert alert-danger'><%= flash[:error] %></div>");
<% end %>

调用项目部分的列表#显示视图：

%h1= @title
.row
  .col-md-6
    = render 'items/item', locals: {items: @items}
.row
  .col-md-6
    = render 'items/form', locals: {list: @list, item: @item}
= link_to "Edit", edit_list_path(@list), class: 'btn btn-success'
= link_to "Delete List", @list, method: :delete, class: 'btn btn-danger', data: { confirm: 'Are you sure you want to delete this to-do list?' }
- if @lists.nil?
  = link_to "New To-do List", new_list_path, class: 'btn btn-success'

项目部分：

- @items.each do |item|
  = item.name
  = link_to "", [item.list, item], method: :delete, class: 'glyphicon glyphicon-ok', remote: true
  %br/

项目控制器：

class ItemsController < ApplicationController
  respond_to :html, :js
  def create
    @list = List.find(params[:list_id])
    @item = @list.items.new(item_params)
    @item.user_id = current_user.id
    if @item.save
      redirect_to @list, notice: 'Your new To-Do Item was saved!'
    else
      redirect_to @list, notice: 'You forgot to enter a To-Do item. Please try again.'
    end
  end
  def destroy
    @list = current_user.lists.find(params[:list_id])
    @item = @list.items.find(params[:id])
    @title = @list.title
    if @item.destroy
      flash[:notice] = "'"#{@item.name}'" was deleted successfully."
    else
      flash[:error] = "There was an error deleting the list."
    end
    respond_with(@item) do |format|
      format.html {render [@list]}
    end
  end
  def item_params
    params.require(:item).permit(:name)
  end
end

当单击 = link_to "", [item.list, item], method: :delete, class: 'glyphicon glyphicon-ok', remote: true 创建的链接时，您的应用会发送删除请求，但不会更改视图。您需要添加一个事件侦听器，用于捕获 ajax 删除请求成功并在视图中隐藏 item 元素。

这是实现此目的的粗略代码。我没有测试代码，但我认为你可以得到这个想法。

项目部分：

.item-container
  - @items.each do |item|
    .item
      = item.name
      = link_to "", [item.list, item], method: :delete, class: 'glyphicon glyphicon-ok', remote: true

.JS：

$(document).ready(function() {
  $('.item-container').on('ajax:success', function() {
    $(this).closest('.item').hide();
  });
};

引用：

  • http://api.jquery.com/on/
  • http://tech.thereq.com/post/17243732577/rails-3-using-link-to-remote-true-with-jquery
  • http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to-label-Options

顺便问一下，你把你发布的这段JavaScript代码放在哪里？我怀疑它曾经被执行过。

对 HAML 不是很熟悉，但看起来您没有在视图中添加ID。您的destroy.js.erb正在寻找像id=item-1这样的选择器以隐藏它。因此，您的项目部分需要填充一个 id，以便以后找到它。在ERB，我会做：

<ul>
<% @items.each do |item| %>
  <li id="item-" + item.id><%= item.name %> </li>
<% end %>
</ul>

类似的东西:)

相关文章：