如何在Rails中實現Ajax？

Question

Webpage Look

所以我有一個待辦事項列表幷包含待辦事項。對於每個不完整的任務（項目），在它旁邊有一個名爲「將項目標記爲完成」的按鈕。 （見button_to方法）每當我點擊該按鈕時，它應該進入該項目並標記爲完成。不過，我正在努力將AJAX實現到這個項目中，我需要幫助。我是rails和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 

附加一個事件來標記項目關閉，打電話給你的Ajax請求：

$(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：ID =」 <％= I tem.id％>「

應該這樣做。這基本上是一個完整的Ajax發佈請求。

Answer 2

添加一些JavaScript來處理窗體上的響應並更新成功回調中的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); 
    } 
) 
});