2012-12-30 67 views
0

目前,我正在實現一個包含項目(slot_allocations)的表格。這些項目基於Rails模型。 表中的項目可以被拖放。使用Json更新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); 

    } 
}) 
+0

剛想到這個,但我不知道它是否會工作。如果我要在以下代碼片段中引用數據,而不是將它推入新數組中。 json會更新模型中的信息嗎? –

+0

哪裏是'makeDraggable'的代碼?使用jQueryUI?任何幫助都取決於該代碼中的事件處理。還需要了解一些關於html輸出的內容,以便能夠引用標識符以便將數據發回。發佈一些示例行html輸出 – charlietfl

+0

好吧,我會在一分鐘內完成。 –

回答

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/

+0

非常感謝。我會嘗試一下並回復你。 –

+1

如果第一次冒險進入AJAX ......學習如何使用瀏覽器控制檯檢查請求以進行故障排除。可以看到發送和接收的所有數據,狀態,頭文件等。可能首次遇到錯誤並且控制檯幫助隔離服務器和腳本問題 – charlietfl

+0

感謝您的建議!我正在使用它,它確實有助於我更好地理解ajax請求。對此感激不盡。我收到了這些請求,但仍然面臨着數據處理方面的問題,這可能需要在Rails中解決。我也使用$ .ajax代替快捷方法。所以,謝謝你的幫助。 –