如何在Rails中实现Ajax？

Question

Webpage Look

So I have a Todo List and contains Todo Items. And for each incomplete task(item), there is a button next to it called "Mark Item as Done". (See button_to method) Whenever I click on that button, it should go into that item and mark it as done. However, I'm struggling to implement AJAX into this project and I need help. I'm new to rails and ajax, so I have no clue what I'm doing... The alert message in the update.js.erb is to test if it's reaching there.

Am I supposed to create a partial file called _todoitems.html.erb or _todolists.html.erb ? And what else am I missing and what else do I need to do?

Here are the relevant files of what I've done so far...

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

Add a custom route for the ajax request in routes.rb. If you have resources for items make it something like:

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

Add a corollary controller action in your items controller and update the state when that action is called:

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

Attach an event to marking the item off and call your ajax request:

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

In your view, give every item an id that relates to their actual id by saying something like: id="<%= item.id %>"

That should do it. That's basically a full ajax post request.

Answer 2

Add some javascript to handle the response on the form and the update the dom on the success callback.

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