更新页面元素不刷新使用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());