Question

Currently, I am implementing a table with items(slot_allocations) in it. The items are based on a Rails model.
The items in the table can be dragged and dropped.

Right now, I am able to retrieve and show data of the model in my table.
I would however also like to update the information in the model after I have successfully drag and drop the item in a new cell and would like to seek advice on how I could go about doing so.

I am currently able to put the information in an array based on the following Jquery Codes.

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

I would appreciate any help on which JQuery methods I could look into or what areas of my code I could change in order to update the model. Thanks in advance.

Additional codes as requested. The whole code is pretty lengthy though. This is the part where after dropping it, the model should be updated. My attempt at updating the array is the codes after the comment.

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

  }
})

Answer 1

OK. Within the drop callback you can make an AJAX request to server. WIthout trying to figure out what all your arrays are will start with simple case

/* 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*/)

Both $.post and $.get are shortcut methods of $.ajax which has many options available depending on needs

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