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，可能使用像Mustache这样的模板引擎，例如：

没有模板引擎：

$.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}}

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

1 个答案: