0

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

1 に答える 1

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}}
于 2012-08-04T14:45:28.737 に答える