views:

370

answers:

2

In my Rails app, I have a model called "Photo" and a PhotosController. As would be expected, I've RESTfully routed the URLs so that the URL "/photos" returns an HTML-rendered list of all photos (as thumbnails), and "/photos/foo" returns an HTML-rendered representation of the photo with the friendly_id of "foo". (I also do XML, JSON, and binary representations, but they're not relevant here.)

I want to make the list page show a subset of Photo thumbnails on initial load, and then dynamically add more thumbnails to my list via AJAX (specifically jQuery). I already have HTML that renders an individual photo list item (basically an <li><img>) in the photos/index view. Since jQuery can inject HTML directly into the DOM, I figure that the best thing to do is extract the list-item code into a partial and then load that partial through AJAX into the list.

My question is: what's the best way to get the HTML out of the partial and into the DOM?

(I already have an idea for implementation; I'll post it as an answer to allow appropriate voting & commenting).

+2  A: 

I figure that the most RESTful way is to make the list-item representation/view of a Photo a sub-resource of the Photo. That would involve:

  • Creating a new Photos::ThumbnailsController
  • Routing "/photos/:id/thumbnail" to this controller (thus my example URL would be "/photos/foo/thumbnail")
  • Creating an index action for this controller (and probably no other actions)
  • Having the index action render the partial containing the list item code. (At this point it may make sense to make the partial a full view).
  • Make the AJAX call to "/photos/:id/thumbnail" when I wanted to add the thumbnail to the list.

Having a whole other controller/resource for one partial/view does seem like a bit overkill though. Is there a better way?

Craig Walker
Your solutions seems pretty solid and adheres to REST principals. +1
Mr-sk
Thanks, I tried to make it so. The problem is that it seems like a lot of hassle for about 2 HTML tags :-P But I'll go with it if nothing else comes up.
Craig Walker
"Having a whole other controller/resource for one partial/view does seem like a bit overkill" - Agreed, but I've done it that way too for clarity. +1
Teflon Ted
That's what I do like about the solution; it's very consistent with both MVC and REST.
Craig Walker
+1  A: 

Not an answer but a suggestion: check out (view source) how some other players have done the infinite scroll like Bing's image search or 37 Signals Haystack (which is certainly in Rails as well).

Results

(edit by Craig)

HayStack makes a call to "/listings.js". This means they're probably using a different Rails format in their responds_to call. I considered this, but I don't like it very much because:

  • It depends on having a format (js in this case) at the URL that isn't being used for any other purpose (and never will be).
  • It depends on JavaScript (and bastardized JS/HTML at that) to do its work. I'd prefer to go pure HTML for consistency, reusability, and cacheability.

Bing's endless search JS was minified so I didn't spend too much time unraveling it.

Teflon Ted
This is one of the things I hate about AJAX: trying to figure out in which part of the code the magic happens. :-P
Craig Walker