Ajax not being loaded to the view rails 3 will_paginate

Question

Im trying to implement an Ajax call with the will_paginate gem, I found this guide http://ramblinglabs.com/blog/2011/11/rails-3-1-will_paginate-and-ajax which seemed like a simple solution, though it includes coffeescript which i am not familiar with

My code is as follows

My View

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

My partial (userrecipes)

 <% @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 file

$('#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()

When i click on the next anchor tag to show the next set of results the page stays as it is and no new content appears

When using the console to see if there are any errors i can see any, the output is

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

Am i missing something here?

Also Whilst inspecting the response in the console it is also showing that the new recipes to be loaded are being loaded but nothing is happening in the view

Any pointers appreciated

Thanks

Answer 1

The links created by will_paginate are html links...

use following code

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

to add data-remote true property to them so they make an js request to the server...

Answer 2

You should add this in js.erb file.

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

this should work.