问题描述:

I'm creating a todo list app. User has_many tasks through categories. I'm creating new task records for each category through jQuery/ajax in order to make the user experience better. I have a delete link after each task, but on the creation of a new record through ajax, the delete link does not show. If I reload the page it appears. How do I make it so the delete link appears on new records? I've tried following this railscast and have most of it setup except I can't get the delete links to appear:

http://railscasts.com/episodes/136-jquery-ajax-revised?autoplay=true.

Here's some of my code:

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 (this function should be the one to load in the delete link but I can't figure it out):

jQuery.fn.loadOnCreate = function() {

this.find('a.delete-task').show();

return this;

}

$(function(){

$('#new_task').loadOnCreate();

});

Thanks.

Edit

This is my Rails code for the link:

<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>

The HTML should look like this for each task:

<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>

网友答案:

From your create.js.erb file:

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

You are missing the delete link in the append. It should actually look like:

$('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>');
相关阅读:
Top