Question

我正在开展一个学习rails的个人项目。它是一个任务管理应用程序，任务有状态，待办事项，正在进行和完成。经过多年的修修补补后，我得到了trello，就像拖放功能在任务状态之间工作，但它没有改变状态。

这是我的javascript代码，

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);

所以现在当我将sortable1（即“to do”）中的项目拖放到sortable2（“正在进行中”）或sortable3（“已完成”）时，我希望它能够调用改变路线

  resources :tasks do
    member do
      put :change
    end
  end

并根据参数更改状态，

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

我是javascript和AJAX的新手。关于它应该如何工作的详细描述，我可以做些什么来更好地解决问题，通过链接到相应主题以便更好地理解将有所帮助。

以下是我的观点

<%= 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具有“state ='to_do'”属性，sortable2具有“state ='in_progress'”和“state ='done'”。我甚至不知道为什么我添加了state属性，只是想想也许它会帮助ajax调用哈哈。

Answer 1

您需要在删除项目时发送ajax / xhr请求。这是一个样本（在Coffeescript中）类似于http://guides.rubyonrails.org/working_with_javascript_in_rails.html

中记录的样本

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

我如何进行Ajax调用？

1 个答案: