Railscasts - Pagination with AJAX

#174

Aug 10, 2009

50 comments

Pagination with AJAX

Learn an easy, unobtrusive way to add AJAX functionality to an existing set of pagination links using jQuery.

Tags: ajax views

Download (24.5 MB, 13:18)

alternative download for iPod & Apple TV (15.9 MB, 13:18)

Read it on ASCIIcasts

Resources

# config/environment.rb
config.gem "mislav-will_paginate", :lib => "will_paginate", :source => "http://gems.github.com"

# products_controller.rb
def index
  @products = Product.paginate(:per_page => 10, :page => params[:page])
end

<!-- layouts/application.html.erb -->
<%= javascript_include_tag 'jquery' %>

<!-- products/index.js.erb -->
$("#products").html("<%= escape_javascript(render("products")) %>");

// public/javascripts/pagination.js
$(function() {
  $(".pagination a").live("click", function() {
    $(".pagination").html("Page is loading...");
    $.get(this.href, null, null, "script");
    return false;
  });
});

// For older jQuery versions...
// jQuery.ajaxSetup({ 
//   'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
// });

< Previous Episode

Next Episode >

50 comments

1. Mephux Aug 10, 2009 at 00:54

I am moving snorby.org to jQuery and this was a huge help - very clean. Thank you.

Report as Spam

2. Vojto Aug 10, 2009 at 00:55

I did just the same thing last week!

Except that I used also history plugin for jQuery - which makes also back/forward buttons work :)

http://www.balupton/projects/jquery_history/

Report as Spam

3. Adam Hill Aug 10, 2009 at 02:00

Very nice Ryan, I'm especially looking forward to the follow-up episode with the changing URL and history maintenance etc.

Report as Spam

4. Radoslav Stankov Aug 10, 2009 at 03:32

Great cast as always.
I use the same technique for my projects. I will be great in some of the future screen casts you show sprockets for managing js dependencies.

Report as Spam

5. hjuskewycz Aug 10, 2009 at 03:56

Thank you Ryan, like Adam I am really looking forward to the next episode because I think AJAX pagination like in this episode breaks the UI. Losing URL/history is always a high price for AJAX.

Report as Spam

6. Dave Shenk Aug 10, 2009 at 03:59

Here's another slightly different solution to get you a similar result.

http://weblog.redlinesoftware.com/2008/1/30/willpaginate-and-remote-links

Report as Spam

7. Brian Armstrong Aug 10, 2009 at 05:36

Yep I think the solution posted by Dave Shenk is simpler:
http://weblog.redlinesoftware.com/2008/1/30/willpaginate-and-remote-links

This is what I used in the past. Perhaps the downside to it (and why you didn't include it) is that it doesn't fall back for people who have javascript turned off?

Probably 90% of the stuff on my site doesn't work without JS. Actually that would be a good railscast...how to display a generic message to people who have JS turned off, like basecamp. Thanks!

Report as Spam

8. Chris Gunther Aug 10, 2009 at 08:22

Great screencast Ryan. I did something similar to this on one of my own sites recently. Looks like it may be easier to use the live method as opposed to my own event bubbling solution. Anybody know if there is any kind of a performance hit in using live versus defining a normal click handler on a parent element and detecting the target?

Ryan, for future screencasts, could you consider doing them from a TDD/BDD approach? I know you've done some screencasts on testing, but I think tackling them from a TDD/BDD approach on a regular basis would help people (myself atleast) get into the same habits themselves.

Thanks,
Chris

Report as Spam

9. Millisami Aug 10, 2009 at 09:05

Great screencast!! and thanx as always.

I'm concerned about the ?_263635377 parameter that is appended in those page links?

I've too seen this in my own project and haven't figured out what that is coz it doesn't break the funcationality. just curious!!

Report as Spam

10. Luciano Aug 10, 2009 at 10:01

@Millisami, I saw that extra parameter also... you can work it out by moving the pagnation links from the products partial into the index view...

Thanks

Report as Spam

11. lobo_tuerto Aug 10, 2009 at 10:04

Excellent screencast!

Lots of info packed on this one, thank you!

Report as Spam

12. clee Aug 10, 2009 at 10:52

Monday's just wouldn't be the same without your excellent screencasts.
Also, I agree that maybe a series of BDD/TDD approaches to creating a solution would be helpful ... it would be nice to compare techniques.
Gotta go watch this screencast :-)

Report as Spam

13. iGEL Aug 10, 2009 at 11:09

Hi!

Thank you for introducing the unintrusive JavaScript topic. I learned only a few months about this by a talk from DHH, who said Rails 3.0 will use unintrusive JavaScript, which seems a very good idea (especially for Prototype deserters like me).

But actually I don't think that pagination is a good example for the usage of ajax. Pagination will usually change large potions of the visible text (more than 90%), so I think it's better to traditionally load the page.

Also you have to remember lot's of things the user expects from a paginated list, like you said, giving the user a proper loading feedback or the usability of the back and next button. Also, the user expect the page to return to the top, if the page was scrolled down. There are probably other usability expectations as well.

Don't break an expected and learned behavior without a good reason.

Report as Spam

14. iGEL Aug 10, 2009 at 11:11

unintrusive => unobtrusive

Report as Spam

15. Scott Motte Aug 10, 2009 at 11:24

Thanks Ryan. Great video. For anyone interested, here is how to do similar in merb, but with a 'more' pagination similar to twitter's instead.

http://scottmotte.com/archives/217.html

Report as Spam

16. Jim Gay Aug 10, 2009 at 13:51

Simplify that code! Use $.getScript(url)

Report as Spam

17. Michael Aug 10, 2009 at 16:45

Nice Screencast. Was wondering what a good approach would be to accomplish this.

Looking forward to next weeks screencast to see your take on handling the history-variant of this.

Makes it easy enough to just implement in a few minutes as a progressive enhancement element. Great!

Report as Spam

18. Geoff Evans Aug 10, 2009 at 17:29

@brian

Just add to any HTML page

Report as Spam

19. Richard McIntyre Aug 10, 2009 at 21:58

Geoff you don't need to add the noscript ugliness as it will work as a regular link without javascript turned on.

Report as Spam

20. defsdoor Aug 11, 2009 at 02:22

You use a nice little helper called javascript to add to the list of javascript loaded on each page. Is this a plugin ?

Report as Spam

21. eqbal Aug 11, 2009 at 03:10

Amazing , unquestionably fabulous ... is there anything like jQuery "live" for prototype ?? thanks alot .

Report as Spam

22. Geoff Evans Aug 11, 2009 at 04:14

@richard

Quite agree in this case it is not needed to add noscript however brian wanted to know how to detect if Javascript is enabled

Report as Spam

23. artemave Aug 11, 2009 at 07:08

What if next version of will_paginate changes class name of a pagination container div? Your code will simply stop working. Suddenly.

This solution relies on external library internals (external internals; I like that), which makes it a bit of a hack.

Still, a great demonstration of technique. Thanks!

Report as Spam

24. Mislav Aug 11, 2009 at 08:22

Prototype.js users: the will_paginate wiki had sample code similar to this railscast for a long time now: http://wiki.github.com/mislav/will_paginate/ajax-pagination

Take a look even if you're not using Prototype.

@Ryan: something you should know about jQuery "live" method: it doesn't re-apply the event handlers to new elements inserted in the DOM. That's what the (now obsolete) plugin called "livequery" was doing. The current jQuery "live" method uses a modern and correct approach: event delegation.

Prototype.js doesn't yet have event delegation support (that's coming in a future release), but event delegation is fairly easy to use manually. I'm using it in the example code on the wiki page linked above.

Report as Spam

25. Lucas Aug 11, 2009 at 17:40

It didn't works for me, the result of the request returns, but it's like the javascript didn't interpreted and the returns didn't been showing.
Can you help me, please?

Report as Spam

26. Joseph Silvashy Aug 11, 2009 at 19:34

Excellent, I've had all this before, but you did show me how amazing the live() function is, and in fact, I'm incorporating this in my site. At some point there was a jQuery plugin called jQuery Live, and it did this and more, like combining both adding things to the dom and binding the events.

Anyhow thanks Ryan, also like to mention that your site is the best screencast site ever and the best deals on um... designer bags and shoes.

Report as Spam

27. Jeff Aug 12, 2009 at 11:17

Brilliant!

Report as Spam

28. Lee Aug 12, 2009 at 20:20

I got to the part where you illustrate an ajax request from index.js.erb by sending the alert "this is an ajax request" and I get a javascript "syntax error" in my firebug console. I never see the alert so of course the ajax doesn't work for me.

What could that be? I'm using jQuery 1.3.2. Thanks for any help!

Report as Spam

29. Sean McCleary Aug 12, 2009 at 20:22

Thank you for choosing to make this demonstration with jQuery. Most people I know using Rails these days wants to or is using jQuery.

Report as Spam

30. lardawge Aug 13, 2009 at 06:16

Great and timely article and thanks to Mislav for posting his prototype solution (which works great btw).

@Joseph Silvashy
LMAO!!!

Report as Spam

31. Carl Aug 13, 2009 at 20:37

Isn't this line missing a right parenthesis:

$(".pagination a").live("click", function() {

Report as Spam

32. squil Aug 14, 2009 at 01:47

Hi guys,
just wanted to let you know that I did a write up of how to go about adding Javascript to paginated content. It's all on my blog: http://thinksimple.pl/entries/83-AJAX-pagination-with-Javascript

Report as Spam

33. Iceblink Aug 14, 2009 at 23:35

You are the most awesome person in the world! Looking forward to the next episode! Thanks a lot as always!

Report as Spam

34. Amy Aug 15, 2009 at 21:56

Another great Railscast, and oddly exactly at the time I needed to know this!

Report as Spam

35. Andrés Aug 16, 2009 at 19:11

This is my favorite cast so far.

Report as Spam

36. Marcin Stecki Aug 16, 2009 at 23:27

Hi Ryan, great episode! However i think there is one, much more elegent solution for handling ajax request, called Taconite. My friend described it here: http://codetunes.com/2008/12/08/rails-ajax-and-jquery/
Cheers, hope you like it.

Report as Spam

37. Lee Aug 17, 2009 at 08:02

To answer my own question (comment #33) you have to add the javascript respond_to type in your controller.

The products controller from this episode does not have any respond_to blocks. Is this common practice now to remove the respond_to blocks from controllers?

Thanks again to Ryan for such great screencasts.

Report as Spam

38. feng Aug 24, 2009 at 01:48

how to change default css to it

Report as Spam

39. jack Aug 30, 2009 at 08:39

I was using a custom action instead of index.

To make Rails execute the code in custom_action.js.erb (as opposed to index.js.erb), I had to use a respond_to block with format.js, like this:

respond_to do |format|
format.html
format.js
end

I'm not sure why Rails doesn't respond to js requests by default?

Report as Spam

40. Arcath Aug 30, 2009 at 12:45

Would it be possible to get use flash[:notice] to display the loading message?

Report as Spam

41. Homar Sep 01, 2009 at 01:14

Instead of printing a loading messages every time you make an AJAX call, you can use something like this:

http://docs.jquery.com/Ajax_Events

Report as Spam

42. Rafał Filipek Sep 04, 2009 at 16:18

1) Big thanks for Your screencasts.
2)Why dont just use $("#products").load(this.href) and in view just render list of products ? You dont have to use jqeury to put generated html into proucts div.
Or maybe You have to. I was playing with this episode on CakePHP not on Rails.

Report as Spam

43. aqar aqar Sep 08, 2009 at 17:56

Thanks man these informations are very helpful

Report as Spam

44. Dustin Oct 22, 2009 at 08:44

For anyone who has yet to refactor their AJAX and run into Javascript conflicts,
you can use:

jQuery.noConflict();

At the head of your file and then use

jQuery instead of $ for your commands and it won't conflict with other AJAX libraries.

Report as Spam

45. wxianfeng Dec 09, 2009 at 01:27

chinese guy can see this posts : http://www.blogjava.net/fl1429/archive/2009/08/25/292522.html