ページを一度に更新する（バックグラウンドで）

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 

のようにそれらを分離しており、これは動作します - しかし、ページは、タスクが移動されたことを確認するためにリフレッシュする必要があります。私は、タスクが、それはこの

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のToDo id値に基づいて一意のIDを与える：

：あなたはクリックハンドラを指定することができるように

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

があなたのチェックボックスにクラスを追加します。

$(".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()); 
}); 

最後に、あなたのC：

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のを使用していると仮定）は、クリックハンドラを指定しますontrollerはリダイレクトする代わりに.jsテンプレートをレンダリングする必要があります。単にcompleted.js.erbと呼び、自動的にレンダリングする必要があります。そのテンプレートでDOMからコンテナdivを削除するためのjavascriptを入れてください：

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

Answer 2

これを削除するには、div idを指定してremoveChild（）を使用します。これをチェックボックスのonClickハンドラに挿入するだけです。

たい場合は、次の変数で

保存（のremoveChildの戻り値から）あなたはそれを削除DIV、チェックボックスがオフになっているので、もし、あなたがcreateChild（にdiv要素を使用することができます）。