更新頁面元素不刷新使用Ajax表單提交

Question

我有一個嵌套屬性和HTML列表元素在同一頁上的窗體。我正在使用AJAX請求處理表單提交。在提交時，我想保持在同一頁面上並更新列表以顯示剛剛提交的項目，而不刷新頁面。

下面的代碼顯示了提交處理程序的JavaScript。我希望能夠使用jquery將表單數據附加到列表中，但我沒有太多的運氣。我已經嘗試使用rails unobtrusive JavaScript，但無法在這種情況下工作。

任何幫助將不勝感激。

$('#new_box').submit(function(event){ 
    event.preventDefault(); 

    var cube = newCube($("#box_name").val(), 25, 25, 25); 
    addCube(cube); 

    var data = {}; 
    data["box"] = {}; 
    data["box"]["x"] = cube.position.x; 
    data["box"]["y"] = cube.position.y; 
    data["box"]["z"] = cube.position.z; 

    var formData = $(this).serialize() + '&' + $.param(data); 

    var locker_id = $('#my-canvas').data('locker').id; 

    $.ajax({ 
     url: '/lockers/' + locker_id + '/boxes', 
     method: 'post', 
     dataType: 'json', 
     data: formData, 
     error: function(){ 
     alert("Could not add box!"); 
     }, 
     success: function(data){ 
     $('.box-list').append(formData); 
     } 
    }); 

    }); 

該列表中的部分如下：

<ul class="list-group box-list"> 
    <li class="list-group-item box" id="<%= dom_id(box) %>" data-box="<%= box.to_json %>"> 
     <%= link_to box.name, "javascript:void(0)" %> 
     <span class="badge"><%= box.items.count %></span> 
     <ul class="list-group box-items"> 
     <% box.items.each do |item| %> 
     <li class="list-group-item"><%= item.name %></li> 
     <% end %> 
     </ul> 
    </li> 
</ul> 

Answer 1

我結束了我的渲染作爲HTML部分Ajax響應，然後追加該部分在Ajax請求的成功塊。

控制器：

respond_to do |format| 
     if @box.save 
     @item = Item.new 
     format.html { render partial: 'boxes/box_list', locals: { box: @box } } 
     end 
    end 

的javascript：

$.ajax({ 
     url: '/lockers/' + locker_id + '/boxes.html', 
     method: 'post', 
     data: formData, 
     error: function(){ 
     alert("Could not add box!"); 
     }, 
     success: function(response){ 
     $('.box-list').append(response); 
     $('input[type=text]').val(''); 
     } 
    }); 

Answer 2

$('.box-list').append($(data).children());