[Rails] AJAX image manipulation

[Max Muermann]

On 8/9/06, Jim Weir <javawaba at hotmail.com> wrote:
> I have this code in a controller that returns images to my browser...with
> ROR.
>
>   def index
>     @products = Product.find_all_ pictures
>   end
>
> ....this is the .rhtml..
>
>
> <% for photo in @pic -%>
>   <div class="entry">
>     <img src="<%= photo.image_url %>"/>
>     <h3><%= h(photo.title) %></h3>
>     <%= photo.description %>
>   </div>
> <% end %>
>
> ....can someonw show me how I can return the results to AJAX?  What I want to
> do is to display  thumbnails along the bottom and when a user clicks on one
> have it a 5x7 area on the screen populated...
>
>   Can AJAX receive resultsets from ROR?
>

Firstly, AJAX is not a thing that is "somewhere in Rails". AJAX is a
name for a bunch of related technologies that can be used to perform
http requests in the background, without reloading the full page. In
Rails, an Ajax call gets mapped to a controller method just like any
other request. You can use the output from the method (normally a
rendered partial) to update a named html element in your view.

To answer your question:

yes, this is entirely possible using Ajax, but if all you need to do
is to change an image, you would probably be better off doing it with
just javascript (Ajax-based solution further down):

Using Javascript:

1. large image:
<img id="big_image" src="<%= product.images[0].url %>">

2. thumbnail bar in your view:

<% for thumbnail in @thumbnails %>
  <img src="<%= thumbnail.url %>" onclick='$('big_image').src='<%=
thumbnail.image_url %>'"
<% end %>

Assuming that the thumbnail class has fields for url (of the
thumbnail) and image_url (of the large image).

BTW, the $('big_image') notation uses the Prototype "$" function,
which is shorthand for document.getElementById. You need to <%=
include_javascript_tag :defaults %> somewhere for this to work.

Using Ajax:

If, for displaying a large image you also want to display other
information (say a description of the image), you can use ajax calls
like so:

1. in your controller:

def large_image
  image_id = params[:id]
  img = Image.find(image_id)
  render :partial=>"image", :locals=>{:image=>image}
end

2. in you partial (called _image.rhtml):

<img src="<% image.url %>" />
<%= image.description %>

3. In your main view:

<div id="big_image">
  <%= render :partial=>'image', :locals=>{:image=>product.images[0]} %>
</div>

<% for thumbnail in @thumbnails %>
  <img src="<%= thumbnail.url %>" onclick='remote_function
:update=>'big_image', :url=>{:action=>large_image,
:id=>thumbnail.image_id}'"
<% end %>

As you can see, for simply showing a different image, the pure
javascript version is much less verbose, which is a good sign that
it's the better solution.

Max