AJAX image manipulation

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 -%>

<%= h(photo.title) %>

<%= photo.description %>
<% 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?

Thanks,
Jim


Express yourself instantly with MSN Messenger! Download today - it’s
FREE!
http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/

Hi Jim

solution 1
RJS should be easy to implement, pass image id to RJS call
and replace the main content area(5x7)with bigimage

Solution 2
try lightbox, it is easy to implement and results are good

regards
A.Senthil N.
http://senthilnayagam.com

def index
<%= photo.description %>

yes, this is entirely possible using Ajax, but if all you need to do
<% for thumbnail in @thumbnails %>

img = Image.find(image_id)

javascript version is much less verbose, which is a good sign that it's the better solution.

Max


Rails mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails

Initially I thought learning how to integrate an AJAX framework woould
be
more work , but worth it 'cause I get a lot more functionality. But
you’re
right, javascript is the fewest lince of code with the least effort for
the
effect I want.

I coouldn’t get you code aboe to work with prototype, but this did,

<% for pic in @pics %> Images

<% end %>

Canyou tell me how to reference a specifc image in the pics collection?
I
tried pic.image_url[0] but it didn’t work…

Thanks,
Jim


Express yourself instantly with MSN Messenger! Download today - it’s
FREE!
http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/

On 8/9/06, Jim W. [email protected] wrote:

<% for photo in @pic -%>

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:

  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

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

<%= image.description %>

  1. In your main view:
<%= render :partial=>'image', :locals=>{:image=>product.images[0]} %>

<% 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

try making pic an instace variable with the @

and in your example above you are referencing pic outside the for loop

<% for @pic in @pics %>

<% end %>

there are a couple of ways, dont take my code verbatim, its just to get
you
thinking in the right direction

one is to update a div using ajax i.e.
“onclick”=>" new Effect.Fade(‘blank_div’); new
Effect.Appear(‘preview_div’)"

or just render a partial with the img

an ajax way is to use an *.rjs file (the rails/ruby javascript ) to
update a
div on your page with the selected thumbnail

e.g in your view

Controller

def do_preview
p_id = #{params[:id]}
@pic = Product.find(:first, :conditions => ["id = ? ", p_id ])
end

do_preview.rjs

page.delay(1) do
#page.show ‘div_list’ + @params[:id].to_s #gold
page.insert_html :after, ‘div_list_edit’ + @params[:id].to_s, :partial
=>
‘preview’

end

_preview.rhtml

#img_tag will look nicer

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

OR you could simply do this, without all the ajaxie hoopla

Controller

def do_preview
p_id = #{params[:id]}
@pic = Product.find(:first, :conditions => ["id = ? ", p_id ])
render(:partial => “preview”)
end

like I said this is just ideas not an actual working example

cheers

dion

www.blogsaic.com