Question

当用户选中复选框时，如何刷新页面（在后台，无缝），以便在选中复选框后，将div或任务移动到另一个位置，因为它已完成？

我已将它们分开了

  def home
    if current_user
        @todos = current_user.todos.where(completed: false)
    end
  end

  def complete
    if current_user
        @todos = current_user.todos.where(completed: !false)
    end
  end

因此，一旦复选框被选中，它就会被移动，这样就行了 - 但是必须刷新页面才能看到任务已被移动。

在我的todos控制器中，我标记任务完成，它看起来像这样

  def completed
    if @todo.update_attribute(:completed, !@todo.completed)
      flash[:success] = "Congratulations, it was successful."
      redirect_to dashboard_path
    else
      flash.now[:error] = "ERROR: Please try again."
      render :new
    end
  end

我的观点是如此

<% @todos.each do |todo| %>
    <div class="card hoverable">
        <div class ="card-content mh-100">
            <span class="card-title"><%= todo.title %></span>
            <p><%= todo.item %></p>
        </div>
        <div class="card-action grey lighten-5">
            <p style="margin: 0;">
            <%= check_box_tag 'todo[completed]', todo.id, todo.completed, data: { remote: true, url: url_for(controller: :todos, action: :completed, id: todo), method: "POST" }, id: todo.id, :onclick => "Materialize.toast('Todo Completed, Grats!', 4000)" %>
            <%= label_tag todo.id, "COMPLETE", :class => 'strikethrough' %>
            </p>
        </div>
    </div>
<% end %>

但是如何在复选框被选中时刷新页面或div，以便任务无缝消失？

Answer 1

使用带有div id的removeChild（）将其删除，只需将其放入onClick处理程序中即可。

如果需要：

在变量中删除div（从removeChild的返回值）时保存div，因此如果未选中该复选框，则可以在createChild（）中使用div。

Answer 2

根据待办事项ID值为您的div提供一个唯一ID，以便您可以选择将其删除：

<div class="card hoverable" id="todo_container_<%= todo.id %>">

在复选框中添加一个类，以便指定单击处理程序：

check_box_tag 'todo[completed]', todo.id, todo.completed, class: 'todo_completed', data: { remote: true, url: url_for(controller: :todos, action: :completed, id: todo), method: "POST" }, id: todo.id, :onclick => "Materialize.toast('Todo Completed, Grats!', 4000)"

然后（假设您使用的是jQuery）指定单击处理程序：

$(".todo_completed").click(function(){
  // it looks like you've got all the info you need for your ajax call in the data attributes attached to the checkbox, so I think the call just looks like this:
  $.ajax($(this).data());
});

最后你的控制器需要渲染.js模板而不是重定向 - 只需将其称为completed.js.erb，它应该自动渲染。在该模板中，使用javascript从DOM中删除容器div：

// completed.js.erb
$("todo_container_<%= @todo.id %>").remove();

刷新页面一次复选框（在后台）

2 个答案: