4

レールと組み合わせたajaxとjqueryから始めて、ユーザーインデックスページの下部に「さらに読み込む」リンクを作成しようとしています。私のユーザー インデックス ページには、最初の 10 人のユーザーが表示され、リンクをクリックすると、次の 10 人のユーザーがユーザー div の下部に読み込まれます。ページネーションには Kaminari を使用します。

私は次のコードから始めました：

User_controller.rb

def index
  @users = User.page(params[:page]).per(10)
end

ユーザー/index.html.erb

<div id="users">
  <%= render :partial => @users %>
</div>
<%= link_to "Load more", "#", :class => "next" %>

_user.html.erb

<div id="box">
  <%= link_to full_name(user), user %>
</div>

アプリケーション.js

私はこのスニペットを見つけました (クレジット: here ) 私のニーズに合わせようとしています:

function loadMore(pageNo) {
  var url = '/users?page=';
  $.get(url + pageNo, function(response) {
    $("#users").append(response);
  });
}

$(document).ready(function() {
  var currPage = 1;
  $("a.next").click(function() {
    loadMore(++currPage);
  });
});

_user パーシャルのボックス div だけでなく、次の結果ですべてのページ レイアウトをロードすることを除いて、私は完全に動作します 。これをどのように管理できますか? index.js.erb を作成する必要がありましたか?

ご協力いただきありがとうございます

4

2 に答える 2

9

そのための別のアクションを作成する必要はありません。目立たないJavaScriptを使用します。次のようなことを試してください：

User_controller.rb

ここでは何も変更する必要はありません。コントローラーが js に応答することを確認してください。

respond_to :html, :js

ユーザー/index.html.erb

<div id="users">
  <%= render :partial => @users %>
</div>
<%= link_to_next_page @users, 'Load More', :remote => true, :id=>"load_more_link" %>
<%###  link_to_next_page is a Kaminari function that returns exactly what the name implies %>

ユーザー/index.js.erb

$('#users').append("<%= escape_javascript(render :partial => @users)%>");
$('#load_more_link').replaceWith("<%= escape_javascript(link_to_next_page(@users, 'Load More', :remote => true, :id=>'load_more_link'))%>");

それを機能させるために必要なのはそれだけです。もちろん、JavaScript を追加して、リンクがクリックされたときに読み込みアイコンを挿入することもできます。注：この正確な実装をテストしていないため、エラーが発生する可能性がありますが、アイデアを得ることができるはずです

于 2012-07-10T00:40:29.697 に答える
3

独自のビューに関連付けられた、独自のアクションを作成する必要があります。次に、レイアウトのレンダリングを無効にしてください。

def more_users
  @users = User.page(params[:page]).per(10)
  render :layout => false
end
于 2011-04-05T05:37:53.483 に答える