0

will_paginate gemを使用してAjax呼び出しを実装しようとしていますが、このガイドhttp://ramblinglabs.com/blog/2011/11/rails-3-1-will_paginate-and-ajaxは単純な解決策のように見えましたが、私がよく知らないコーヒースクリプトが含まれています

私のコードは次のとおりです

私の見解

<div class="container">
 <div class="row">
  <div id="userRecipes">
   <%= render partial: 'userrecipes' %>
 </div>
</div><!--/row-->

私の部分（ユーザーレシピ）

 <% @recipes.each do |r| %>
  <div class="span3">
   <div class="thumbnail">
    <%= image_tag r.avatar.url(:myrecipes) %>
   </div>
   <h4><%= link_to r.dish_name, r %></h4>
   <hr>
    <p><%= truncate r.description, :length => 90 %></p>
    <p><%= link_to "Edit Recipe", edit_recipe_path(r.id) %></p>
    <p><%= link_to "Delete Recipe", recipe_path(r.id), :confirm => "Are you sure?", :method => :delete %></p>
    <p><%= link_to "Add to favorites",  {:controller => 'favourites', :action => 'create', :recipe_id => r.id}, {:method => :post } %></p>
   </div><!--/span3-->
   <% end %>
   <%= will_paginate @recipes %>

userrecipes.js.erbファイル

$('#userRecipes').html('<%= escape_javascript(render partial: 'userrecipes') %>');
$.setAjaxPagination();

Coffeescript

$ ->
$.setAjaxPagination = ->
$('.pagination a').click (event) ->
  event.preventDefault()
  loading = $ '<div id="loading" style="display: none;"><span><img src="/assets/loading.gif" alt="cargando..."/></span></div>'
  $('.other_images').prepend loading
  loading.fadeIn()
  $.ajax type: 'GET', url: $(@).attr('href'), dataType: 'script', success: (-> loading.fadeOut -> loading.remove())
  false

  $.setAjaxPagination()

次のアンカータグをクリックして次の結果セットを表示すると、ページはそのままで、新しいコンテンツは表示されません

コンソールを使用してエラーが発生していないかどうかを確認すると、出力は次のようになります。

GET http://localhost:3000/my_recipes?page=2&_=1355055997639

私はここで何かが欠けていますか？

また、コンソールで応答を検査している間、ロードされる新しいレシピがロードされていることも示していますが、ビューでは何も起きていません

どんなポインタもありがたい

ありがとう

4

2 に答える 2

1

will_paginate によって作成されたリンクは html リンクです...

次のコードを使用

 $('.pagination a').attr('data-remote', 'true');

それらに data-remote true プロパティを追加jsして、サーバーにリクエストを送信する...

于 2012-12-09T17:19:28.707 に答える
0

これを js.erb ファイルに追加する必要があります。

$('.pagination a').attr('data-remote', 'true');

これはうまくいくはずです。

于 2014-03-12T13:07:02.973 に答える