使用 jQuery/AJAX 在 Rails 应用程序中创建新记录时出现删除链接时出现问题答案

【问题标题】：Trouble getting delete link to appear for new records using jQuery/AJAX for creation in Rails app使用 jQuery/AJAX 在 Rails 应用程序中创建新记录时出现删除链接时出现问题
【发布时间】：2012-11-26 20:13:59
【问题描述】：

我正在创建一个待办事项列表应用。用户通过类别拥有_many 任务。我正在通过 jQuery/ajax 为每个类别创建新的任务记录，以使用户体验更好。我在每个任务之后都有一个删除链接，但是在通过 ajax 创建新记录时，删除链接不显示。如果我重新加载它出现的页面。如何使删除链接出现在新记录上？我试过关注这个 railscast 并设置了大部分内容，但我无法显示删除链接： http://railscasts.com/episodes/136-jquery-ajax-revised?autoplay=true.

这是我的一些代码：

class TasksController < ApplicationController
  def new
   @category = Category.find(params[:category_id])
   @task = @category.tasks.new
  end

  def create
    @category = Category.find(params[:category_id])
    @user = @category.user
    @task = @category.tasks.create(params[:task])
    respond_to do |format|
      format.html { 
       if @task.save
         redirect_to user_path(@user), notice: "Task created."
       else
         render 'new'
       end
    }
      format.js
    end
  end

  def destroy
    @category = Category.find(params[:category_id])
    @task = @category.tasks.find(params[:id])
    @user = @category.user
    @task.destroy
    redirect_to user_path(@user)
  end
end

new.js.erb：

$('.category-<%= @category.id %>-task-link').hide().after('<%= j render("form") %>');

create.js.erb：

$('form.new_task').remove();
$('.category-<%= @category.id if @category %>-task-link').show();
$('div.category-<%= @category.id if @category %>-tasks').append('<li class="<%= @task.id if @task %>"><%= j @task.name if @task %></li>');
$('li.task').loadOnCreate();

tasks.js（这个函数应该是在删除链接中加载的，但我想不通）：

jQuery.fn.loadOnCreate = function() {
  this.find('a.delete-task').show();
  return this;
}

$(function(){
  $('#new_task').loadOnCreate();
});

谢谢。

编辑

这是我的 Rails 代码链接：

<div class="category-<%= category.id %>-tasks">
    <% category.tasks.each do |task| %>
        <li class="task">
            <%= task.name if task %>
            <%= link_to "x", category_task_path(category, task), class: "delete-task pull-right", :method => :delete, :confirm => "Are you sure?" %>
        </li>
    <% end %>
</div>

每个任务的 HTML 应该如下所示：

<li class="task">Task<a href="/categories/1/tasks/27" class="delete-task pull-right" data-confirm="Are you sure?" data-method="delete" rel="nofollow">x</a>
</li>

【问题讨论】：

您能否添加 html 的外观（刷新页面后）？在运行 show() 之前插入 a.delete-task 的位置和时间？
我用 HTML 代码的样子编辑了帖子

标签： jquery ruby-on-rails ajax

【解决方案1】：

来自您的create.js.erb 文件：

$('div.category-<%= @category.id if @category %>-tasks').append('<li class="<%= @task.id if @task %>"><%= j @task.name if @task %></li>');

您缺少append 中的删除链接。它实际上应该是这样的：

$('div.category-<%= @category.id if @category %>-tasks').append('<li class="<%= @task.id if @task %>"><%= j @task.name if @task %><%= link_to "x", category_task_path(category, task), class: "delete-task pull-right", :method => :delete, :confirm => "Are you sure?" %></li>');

【讨论】：