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

This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

| Privacy Policy | Terms of Service | Remote Ruby Jobs