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

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

Answer 2

我最终将我的ajax响应呈现为html partial，然后将该部分附加到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('');
      }
    });

使用ajax表单提交更新页面元素而不刷新

2 个答案: