0

現在、項目 (slot_allocations) を含むテーブルを実装しています。項目は Rails モデルに基づいています。テーブル内の項目はドラッグ アンド ドロップできます。

現在、テーブル内のモデルのデータを取得して表示できます。ただし、アイテムを新しいセルにドラッグ アンド ドロップした後、モデル内の情報を更新したいと思います。その方法についてアドバイスを求めたいと思います。

現在、次の Jquery コードに基づいて情報を配列に入れることができます。

 var slot_allocation= []; //array storing info
 $.getJSON('slot_allocations', function(data) { //get json method, put the items in the slot_allocation array.
    $.each(data, function(i, item) {
    slot_allocation.push(item);
 });

 //some extra methods for table creation etc.
 createSubjectsTable($("#subjects"),timeslots,subjects);
 makeDraggable();
 });

モデルを更新するために調べることができる JQuery メソッドや、コードのどの領域を変更できるかについて、助けていただければ幸いです。前もって感謝します。

要求に応じて追加のコード。ただし、コード全体はかなり長いです。これは、ドロップ後にモデルを更新する必要がある部分です。配列を更新しようとしているのは、コメントの後のコードです。

$('.Empty').droppable({
  accept: '.Group',
  tolerance: 'pointer',
  drop: function(event,ui){
    ui.droppable = $(this);
    var new_alloc_info = ui.droppable.attr("id")
    var array = new_alloc_info.split('--');
    var timeslot = array[1];
    var subject = array[2];

    var old_alloc_id = ui.draggable.attr("id");
    var array2 = old_alloc_id.split('--');
    var alloc_id = array2[3];

//This is the part where I want to update the rails model
    slot_allocation[alloc_id-1].timeslot=timeslot; 
    slot_allocation[alloc_id-1].subject=subject;        

    var allocText = "alloc--"+timeslot+"--"+subject+"--"+alloc_id;
    ui.draggable.attr("id",allocText);
    ui.draggable.insertBefore(ui.droppable);

  }
})
4

1 に答える 1

1

わかった。コールバック内で、dropサーバーへの AJAX 要求を行うことができます。すべての配列が何であるかを理解しようとせずに、単純なケースから始めます

/* receive id and time params at server as you would form field "name" */ 
var dataToServer={ id: alloc_id, time: timeslot};

/* can use $.get or */
$.post( url, dataToServer, function( response){
    /* AJAX completed successfully, can access response data here*/
}/* dataType argument here if want to use JSON or XML response*/)

$.postとはどちらも、必要に応じて多くのオプションを利用できる$.getショートカット メソッドです。$.ajax

jQuery AJAX API: http://api.jquery.com/category/ajax/

于 2012-12-30T17:38:52.723 に答える