我如何拨打Ajax电话？

Question

I am working a personal project for learning rails. Its a task management app, the task has states, todo, in progress and done. After tinkering for many days i got trello like drag and drop functionality working in between task states but its not changing the state.

here is my javascript code,

var ready;
var id = $(this).attr("task_id");
ready = function(){
    // call sortable on our div with the sortable class
    $('#sortable1').sortable({
      connectWith: ".connected",
      dropOnEmpty: true
    });
    $('#sortable2').sortable({
      connectWith: ".connected",
      dropOnEmpty: true
    });
    $('#sortable3').sortable({
      connectWith: ".connected",
      dropOnEmpty: true
    });
};

$(document).ready(ready);
/**
 * if using turbolinks
 */
$(document).on('page:load', ready);

So now when i drag and drop item from sortable1(which is "to do") to sortable2(which is "in progress") or sortable3(which is "done"), i want it to make the call to the change route

  resources :tasks do
    member do
      put :change
    end
  end

and change the state based on the params,

def change
    @task.update_attributes(state: params[:state])
    respond_to do |format|
        format.html { redirect_to tasks_path, notice: 'Task updated' }
    end
end

I am new to javascript and AJAX in general. Detailed description on how it should work, what i can do to solve the problem better, with links to respective topic for better understanding would help.

Here is my views

<%= link_to 'New Task', new_task_path, class: "btn btn-primary" %>
<br>
<br>
<div class="row">
  <div class="col-lg-4 tasks">
    <h2 class="text-xs-center">Todo</h2>
    <ul id="sortable1" class="connected sortable list droptrue" state="to_do">
    <% @to_do.each do |task| %>
    <li draggable="true">
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning'  %>" style="max-width: 20rem;" task-id="<%= task.id %>">
      <div class="card-header action-box">
        <div class="text-xs-left">
          <strong><%= link_to task.title, edit_task_path(task)%></strong>
        </div>
          <div class="btn btn-secondary btn-sm">
            <i class="fa fa-play-circle" aria-hidden="true"></i>
          </div>
      </div>
    </div>
  </li>
    <%end%>
    </ul>
  </div>

  <div class="col-lg-4 tasks">
    <h2 class="text-xs-center">In Progress</h2>
    <ul id="sortable2" class="connected sortable list droptrue" state="in_progress">
    <% @in_progress.each do |task| %>
    <li draggable="true">
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning'  %>" style="max-width: 20rem;" task-id="<%= task.id %>">
      <div class="card-header action-box">
        <div class="text-xs-left">
          <strong><%= link_to task.title, edit_task_path(task)%></strong>
        </div>
          <div class="btn btn-secondary btn-sm">
            <i class="fa fa-play-circle" aria-hidden="true"></i>
          </div>
      </div>
    </div>
  </li>
    <%end%>
    </ul>
  </div>


  <div class="col-lg-4 tasks">
    <h2 class="text-xs-center">Done</h2>
    <div>
    <ul id="sortable3" class="connected sortable list droptrue" state="done">
    <% @done.each do |task| %>
    <li draggable="true">
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning'  %>" style="max-width: 20rem;" task-id="<%= task.id %>">
      <div class="card-header action-box">
        <div class="text-xs-left">
          <strong><%= link_to task.title, edit_task_path(task)%></strong>
        </div>
          <div class="btn btn-secondary btn-sm">
            <i class="fa fa-play-circle" aria-hidden="true"></i>
          </div>
      </div>
    </div>
  </li>
    <%end%>

    </ul>
  </div>
</div>

sortable1 has "state='to_do'" attribute , sortable2 has "state='in_progress'" and "state='done'". I dont even 100% know why i added state attribute, just thought maybe it will help while ajax calling haha.

Answer 1

You need to send an ajax/xhr request when you drop an item. Here's a sample (in Coffeescript) similar to what is documented at http://guides.rubyonrails.org/working_with_javascript_in_rails.html

$.ajax(url: "/change").done (html) ->
  $("#results").append html