Wie mache ich Ajax Anruf?

Question

Ich arbeite ein persönliches Projekt zum Lernen von Schienen. Es ist eine Task-Management-App, die Aufgabe hat Staaten, Todo, in Arbeit und fertig. Nachdem ich viele Tage gebastelt habe, habe ich Trello wie Drag-and-Drop-Funktionalität, die zwischen den Aufgabenzuständen arbeitet, aber den Zustand nicht ändert.

hier ist mein 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 jetzt, wenn ich per Drag & Drop Element aus sortable1 (die "to do" ist) zu sortable2 (was "in progress") oder sortable3 (die "done"), ich will es den Anruf an die Route ändern

resources :tasks do 
    member do 
     put :change 
    end 
    end 

und ändern sie den Zustand auf den params basiert machen,

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

Ich bin neu bei Javascript und AJAX im Allgemeinen. Eine detaillierte Beschreibung, wie es funktionieren soll, was ich tun kann, um das Problem besser zu lösen, mit Links zum jeweiligen Thema zum besseren Verständnis würde helfen.

Hier ist meine Ansichten

<%= 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 hat "state = 'to_do'" -Attribut, sortable2 hat "state = 'IN_PROGRESS'" und "state = 'gemacht'". Ich weiß nicht einmal 100%, warum ich State Attribut hinzugefügt habe, nur gedacht, vielleicht wird es helfen, während Ajax Haha nennen.

Answer 1

Sie müssen eine AJAX/XHR-Anfrage senden, wenn Sie einen Artikel fallen lassen. Hier ist ein Beispiel (in Coffeescript), ähnlich wie bei http://guides.rubyonrails.org/working_with_javascript_in_rails.html dokumentiert

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