在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}}