AjaxをRailsに実装する方法は？

Question

Webpage Look

私はTodo Listを持っており、Todo Itemsを含んでいます。それぞれの不完全なタスク（アイテム）には、そのアイテムの横に「完了アイテムとしてマークする」というボタンがあります。 （button_toメソッドを参照してください）そのボタンをクリックするたびに、その項目に入り、完了したとマークする必要があります。しかし、私はこのプロジェクトにAJAXを実装するのに苦労しており、私は助けが必要です。私はレールとアヤックスを初めて使っているので、私は何をしているのか分かりません... update.js.erbの警告メッセージは、そこに到達しているかどうかをテストすることです。

私は_todoitems.html.erbまたは_todolists.html.erbと呼ばれる部分的なファイルを作成することになっているだろうか？それ以外に何が欠けているのですか、それ以外に何が必要ですか？ここで

は

routes.rbを...私はこれまで何をやったかの関連ファイルである

todolist_todoitems GET /todolists/:todolist_id/todoitems(.:format)   todoitems#index 
         POST /todolists/:todolist_id/todoitems(.:format)   todoitems#create 
new_todolist_todoitem GET /todolists/:todolist_id/todoitems/new(.:format)  todoitems#new 
edit_todolist_todoitem GET /todolists/:todolist_id/todoitems/:id/edit(.:format) todoitems#edit 
    todolist_todoitem GET /todolists/:todolist_id/todoitems/:id(.:format)  todoitems#show 
         PATCH /todolists/:todolist_id/todoitems/:id(.:format)  todoitems#update 
         PUT /todolists/:todolist_id/todoitems/:id(.:format)  todoitems#update 
         DELETE /todolists/:todolist_id/todoitems/:id(.:format)  todoitems#destroy 
      todolists GET /todolists(.:format)         todolists#index 
         POST /todolists(.:format)         todolists#create 
      new_todolist GET /todolists/new(.:format)        todolists#new 
     edit_todolist GET /todolists/:id/edit(.:format)      todolists#edit 
       todolist GET /todolists/:id(.:format)        todolists#show 
         PATCH /todolists/:id(.:format)        todolists#update 
         PUT /todolists/:id(.:format)        todolists#update 
         DELETE /todolists/:id(.:format)        todolists#destroy 
        root GET /             todolists#index 

todolists/_form.html.erb

<%= form_for(@todolist, remote: true) do |f| %> 

todolists_controller.rb

# PATCH/PUT /todolists/1 
    # PATCH/PUT /todolists/1.json 
    def update 
    respond_to do |format| 
     if @todolist.update(todolist_params) 
     format.html { redirect_to @todolist, notice: 'Todolist was successfully updated.' } 
     format.json { render :show, status: :ok, location: @todolist } 
     format.js 
     else 
     format.html { render :edit } 
     format.json { render json: @todolist.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

private 
    # Use callbacks to share common setup or constraints between actions. 
    def set_todolist 
     @todolist = current_user.todolists.find(params[:id]) 
    end 

todolists/show.html.erb

<!-- paginate_items is basically the current user's items --> 
<% @paginate_items.each do |item| %> 
<div class="list"> 

    <% if item.due_date > Date.today %> 
    <% if item.done? %> 
     <a class="complete"> 
     <%= item.due_date %> 
     </a> 
     <a class="linkResults"> 
     <%= link_to "#{item.task_title}", [@todolist, item], style: "font-weight: bold;" %><br/> <br/> 
     </a> 
    <% else %> 
     <form class="oneLine"> 
     <a class="notDue"> 
      <%= item.due_date %> 
     </a> 
     <a class="linkResults"> 
      <%= link_to "#{item.task_title}", [@todolist, item], style: "font-weight: bold;" %> 
      <%= button_to "Mark Item as Done", edit_todolist_todoitem_path(@todolist, item), remote: true, id: "done_item_true" %><br/> <br/> 
     </a> 
     </form> 
    <% end %> 

todolists/update.js.erb

alert("TEST TEST TEST"); 

Answer 1

ルートでのAjaxリクエストのためのカスタムルートを追加します。 rb。

resources :items do 
    collection do 
    post 'check_it_off' 
    end 
end 

あなたの商品のコントローラで必然コントローラのアクションを追加し、そのアクションが呼び出されたときの状態を更新します：

def check_it_off 
    item_id = params[:item_id] 
    item = Item.find(item_id) 

    # whatever you are updating, just an example 
    item.status = done 
    item.save 
    render json: {data: "Success"} 
end 

はマーキングにイベントをアタッチあなたが項目のためのリソースを持っている場合、それはのようなものを作ります、あなたのビューで

$(document).on('click', '.some-class', function(e){ 
    e.preventDefault(); 

    var itemId = $('#item_id') 

    $.ajax({ 
    type: 'POST', 
    url: '/items/check_it_off' 
    data: itemId 

    }).done(function(response){ 
     console.log(response) 
    }) 
}) 

のようなものを言うことによって、すべての項目に自分の実際のIDに関連するIDを与える：アイテムはオフにし、あなたのAJAXリクエストを呼び出すID =」<% = I tem.id％> "

そうすべきです。これは基本的に完全なAjax投稿要求です。

Answer 2

フォームのレスポンスを処理するjavascriptをいくつか追加し、successコールバックのDOMを更新します。

$(function(){ 
    $("#form_id").on("ajax:success", function(e, data, status, xhr) { 
    // update the dom here, e.g. 
    $("#stuff").append('<img src="check.png"/>'); 
    } 
).on("ajax:error", function(e, xhr, status, error) { 
    console.log(e, xhr, status, error); 
    } 
) 
});