我正在创建一个待办事项列表应用程序。 用户通过类别has_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>
从您的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>');