CODEWITHSUNDEEP
jqueryruby-on-railsajaxrestpartial-views
Craig Walker
Craig Walker

Reputation: 51717

RESTfully getting HTML partial content via AJAX in Rails

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).

Upvotes: 1

Views: 1505

Answers (2)

Teflon Ted
Teflon Ted

Reputation: 8846

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.

Upvotes: 1

Craig Walker
Craig Walker

Reputation: 51717

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?

Upvotes: 3

Related Questions