在Rails中使用带有Json响应的AJAX重新加载部分视图

Question

当我调用$ .getJSON时，我想重新加载tbody元素。换句话说，我需要删除所有元素，并通过Json响应放置新元素。

JS

$(document).ready(function(){ 
    $('#position').sortable({ 
    update: function(event, ui) { 
     var newOrder = $(this).sortable('toArray').toString(); 
     $.getJSON('/save_positions.json', {ids:newOrder}, function(data){ 
      ?????? 
     }); 
    } 
    }); 
}); 

我查看

# index.html.erb 

<tbody id="position"> 
    <%= render :partial => "activities"%> 
</tbody> 

管窥

#_activities.html.erb 

<% @activities.each do |activity| %> 
    <tr id='<%= activity.id %>'> 
    <td><%= activity.position %></td> 
    <td><%= link_to activity.id, activity_path(activity) %></td> 
    <td><%= activity.name %></td> 
    <td><%= activity.estimated %></td> 
    <td><%= activity.used %></td> 
    <td><%=l activity.created_at %></td> 
    </tr> 

我的动作（应用控制器）

def save_positions 
    @activities = Activity.all(:order => 'position') 

    respond_to do |format| 
    format.json { render :json => @activities } 
    end 
end 

Answer 1

从你的代码中，我得到的印象是，你要做的是生成新的HTML服务器端并将其插入到文档中。如果是这样的情况下，尝试这样的事：

$.get('/save_positions', { ids : newOrder }).done(function(data) { 

    $("#position").html($(data).html()); 

}); 

如果你真的想返回JSON，那么你可能想返回对象的数组，并遍历它来生成新的HTML，也许使用模板引擎像小胡子，如：

无模板引擎：

$.getJSON('/save_positions.json', { ids : newOrder }).done(function(data) { 

    var positions = []; 

    $.each(data, function (key, val) { 

    // generate an element 
    var el = $("<tr>"); 

    // ... 

    positions.push(el); 

    }); 

    $("#position").empty().append(positions); 

}); 

或

JS：

$.getJSON('/save_positions.json', { ids : newOrder }).done(function(data) { 

    var positions = Mustache.render(template, data); 

    $("#position").html(positions); 

}); 

胡子模板：

{{#positions}} 

<tr id='{{activity.id}}'> 
    <td>{{activity.position}}</td> 
    <td>{{activity.url}}</td> 
    <td>{{activity.name}}</td> 
    <td>{{activity.estimated}}</td> 
    <td>{{activity.used}}</td> 
    <td>{{activity.created_at}}</td> 
</tr> 

{{/positions}}