Another thing to mention is I tried using Firebug to set a breakpoint in application.js on the addBehavior line, as well as other places in remote and lowpro, and nothing hit. There is some very obscure bug.

Matt,

This works like a charm with trunk lowpro and new 1.6 prototype. I got everything working perfectly except for one small detail: After you "update" the first time, the lowpro behavior does not seem to be attached, thus falling back into a non-ajax call. Is this due to the trunk lowpro / 1.6 prototype combo, or do you have any idea why that may be happening?

Best

@ Malko

Low pro 0.5 changed a bit and you now need to set reassignafterAjax to true.

Event.addBehavior.reassignAfterAjax = true;

Thanks for the comment, I forgot to post about this recent change.

hi, nice article. unfortunately the link to 'remote.js' is not working for me at the moment, getting a 404: http://svn.danwebb.net/external/lowpro/trunk/behaviours/remote.js

@bob

remote.js has been merged into the lowpro.js base. This is why you can't find it. If you just download the new lowpro (which works with prototype 1.6), you should be fine. Just make you see Matt's comment above.

Best

Hi,

This seems like a fantastic way to paginate, I already had the "will_paginate" plugin installed, so I just wanted to implement that lowpro feature. I have the latest prototype & lowpro included in my page, checked that the files were in the correct path and readable.

but when I reload the page, all I see in firebug is an error: Remote is not defined [Break on this error] 'div.pagination a' : Remote.Link

been through the lowpro.js file, and found this function in line 275 "Remote.Link = Behavior.create(Remote.Base, { ..."

so I'm stucked... :( anyone has a clue of what I did wrong ?

thanks

julien

oooops, a bit of logic and I found it....

using javascriptincludetag :default the application.js was loaded before lowpro.js, it's why I had the error.

I replaced the default tag to include the javascripts in correct order : prototype, lowpro, application and now it works :)

Just updated the article to reflect the latest low pro changes.

A quick trick, if you don't want to use Event.addBehavior.reassignAfterAjax = true; because it might slow down your application, you can always use

Event.addBehavior.reload();

to manually reload the behavior rules.

Hi Matt,

I just tried your update, and using low pro 0.5 and Prototype 1.6.0, things seem to work properly during the first ajax click, but subsequent ones cause two events to fire. Do you know what's up with that?

hi, i'm trying to use this example, i think i've done all right but my partial is update with this code: try { Element.update("components", "\u003Cdiv id=\"components\"\u003E\n\n \n\u003Ch2\u003EDimmer\u003C\/h2\u003E\n\n\u003Ca href=\"\/components\/new_component\/5\"\u003ENew 'Dimmer' Component\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\n\n\u003Ctable cellpadding=\"0\" cellspacing=\"0\" class=\"border\"\u003E\n \u003Cthead\u003E\n \u003Ctr\u003E\n \n \u003Cth\u003EName\u003C\/th\u003

instead of the correctly formatted html. What am i doing wrong?

hello,

I'm having the same problem as juju:

Firefox says Remote is not defined 'div.pagination a' : Remote.Link.

I'm sure that I don't have any call to javascriptincludetag : default

And in my application.rhtml I have:

I don't see in the debuger any error for loading this files.

And in my application.js I have:

Event.addBehavior.reassignAfterAjax = true; Event.addBehavior({ 'div.pagination a' : Remote.Link })

Any clue ?

thanks,

rai

@rai make sure you are using the latest version of lowpro and that lowpro is loaded before application.js

I'm sorry I can't help more :(

This works well when you only have one paginator per action. But will_paginate builds the links from the template params so I can't figure out how to have multiple paginators on a single page. Does anyone have some pointers to get that to work? I was thinking along the lines of using different class names for each pagination div and adding different Behaviors but I'm not sure how to modify Remote.Link to call out different actions than the default.

I'm running into a weird error where the ajax call seems to be working however instead of replacing the partial it is putting in a new copy on top of it shifting it down and to the right. I can still see the top border of the previous page, and like I said earlier all the new pages show up shifted slightly, down and to the right?

Any ideas on what may be causing this and how I may be able to resolve the issue?

@francesco

You're probably using an :update=>'elemname' in your remotefunction which causes the element to be replaced with the jscript returned by the render :update {...}

@jake

I'm having the same issue has francesco, but it only occurs after you flip through the pagination, click on a new page and then hit the back button to return to the page with the pagination on it.

I'm kind of new at this so where might I find that remote function that you mentioned? I took my code straight from the example above. And while this error might be something some people may never see it would be bad for the people that do run across it.

Any help would be appreciated. Thanks.

rai and others - I just had a similar problem and it is due to prototype 1.5.0. Upgrade you're prototype.js and you'll be much better.

@Tom

I got multiple element ajax pagination working fairly easily.

1. in your controller make sure you have unique page params defined when using paginate :page => params[:page_assets] :page => params[:page_comments] etc...
2. Also in the controller check what page param has been submitted and act accordingly

if params[:page_assets] respond_to do |format| format.html format.js do render :update do |page| page.replacehtml 'assetlist', :partial => "assets/show_assets", :locals => {:assets => @assets} end end end end

Probably could move this into a view helper to minimize duplication when checking multiple conditions but i couldn't be bothered at the moment.

Using this method how could I add an effect to this? Maybe one of the script.aculo.us effects.

Matt

Thanks for figuring out the issue with :defaults. Pulling my hair out, until I read your comment.

Cheers,

GP

Hmm, I'm having a really simple problem; pagination is working, the ajax calls are updating the content however the page numbers aren't posting pack so that the correct page is "highlighted" as being the active.

If I do the URL

items?page=4

that obviously shows the correct page number as being selected.

Ok, I got it, didn't see the note regarding putting the pagination tags inside the partial, wow... it finally worked!!!!

Nice pagination enhancement. Got it working mostly except it seems every other page submit executes a browser refresh with URL update to my browser path bar. So to be a little more clear click from page 1 -> 2 goes fine, 2 to 3 causes a refresh, from 3 back to 1 causes no refresh. Seems it's every other pagination click that causes a refresh no matter how many pages or what order I click the pages in. Anyone have any clue on this? I'm Using rails 2.0.2 and latest prototype.

Let me just say: when the title says '5 minutes' it means 5 minutes!!! if that!! :)

Great tutorial. Worked perfectly, first try. And it helped me wrap my brain around UJS/LowPro a little more. Beautiful!

So, here is an issue. This all works well, but let's say I'm using it in a scenario where I have multiple tabs that are also loaded via ajax. Each tab displays different data of the same model. For instance let's say the model is Post, and I have tab links to posts by category, author, rating and user favorites. I used a different action in the controller for each of these tabs.

What happens with the pagination is that it works fine for the default /posts view. However, when I get to the highest rated tab, the records load and the paginating links show up but when I click the link, it doesn't go to the next page. I can see the request in the console, it's requesting /posts/highest_rated?page=2 but that action isn't returning to the view like the default posts is.

Any ideas?

Brodie: Maybe you're using different containers for the different tabs? In this case, you'd have to customize some of Matt's stuff. If Firebug executes the AJAX request correctly, it's usually a sign that there's something wrong with response evaluation.

Hi Matt, i really appreciate your hack to will_paginate, it was excactly what o was looking for. I have Prototype 1.6.0.2 and Low Pro 0.5. Everything seems to work fine and it did, but with firebug i get this annoying javascript error and googling didn't help:

Event.addBehavior has no properties application.js?1210710865()application.js?12... (line 5) Event.addBehavior.reassignAfterAjax = true;

where my application.js is exactly like your and in my view i included the javascripts like this:

<%= javascript_include_tag 'prototype' %>
<%= javascript_include_tag 'lowpro' %>
<%= javascript_include_tag 'remote' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'effects' %>
<%= javascript_include_tag 'controls' %>

I even tried to substitute "Event.addBehavior.reassignAfterAjax = true;" with this "Event.addBehavior.reload();" but with the same result.

Any ideas?

Thanks in advance.

Thanks for the excellent tutorial. Note, my will_paginate links were not updating correctly so I added the following to the code:

format.js do render :update do |page| page.replace_html 'images', :partial => "/admin/images/image", :collection => @images page.replacehtml 'willpaginate', "#{will_paginate @images}" end end