обновить элементы страницы без обновления с помощью формы ajax submit

Question

У меня есть форма с вложенными атрибутами и элементом списка html на той же странице. Я обрабатываю форму, используя запрос AJAX. На отправке я хочу остаться на одной странице и обновить список, чтобы отобразить только что представленный элемент без обновления страницы.

В приведенном ниже коде представлен javascript для обработчика отправки. Я хотел бы иметь возможность просто добавлять данные формы в список, используя jquery, но мне не очень повезло. Я попытался использовать рельсы ненавязчивый 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.

Контроллер:

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