Forum: Ruby on Rails How to display different images using ajax?

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
F639e0cdf2fa098b535d6ec766b2aee1?d=identicon&s=25 Szymon Nowak (g0nzo)
on 2006-03-14 17:03
Hi!

On my page i display one full size image and a list of thumbnails.
I'd like to change the full size image with a full size version of a
thumbnail, after clicking on one of them.

How to write controller action, so it would update the image without
reloading the whole page? It's easy with text, but how to reload an
image?
7223c62b7310e164eb79c740188abbda?d=identicon&s=25 Xavier Noria (Guest)
on 2006-03-14 17:22
(Received via mailing list)
On Mar 14, 2006, at 17:03, szymek wrote:

> On my page i display one full size image and a list of thumbnails.
> I'd like to change the full size image with a full size version of a
> thumbnail, after clicking on one of them.
>
> How to write controller action, so it would update the image without
> reloading the whole page? It's easy with text, but how to reload an
> image?

Wrap the full-size image in a div/span with some id to pass to
link_to_remote, and let the controller send the full img element with
the corresponding src attribute depending on the clicked thumbnail.
The browser will show the new image (in my trials).

As a design pattern that works for me, to produce the initial page I
use the same action in the view via render_component, doing so that
part is genereated always in the same way, from a single piece of code.

-- fxn
F639e0cdf2fa098b535d6ec766b2aee1?d=identicon&s=25 Szymon Nowak (g0nzo)
on 2006-03-14 17:28
I didn't suspect it will work but it just did:

render :text => "<img src='new_image.jpg' alt='' />"
F639e0cdf2fa098b535d6ec766b2aee1?d=identicon&s=25 Szymon Nowak (g0nzo)
on 2006-03-14 17:40
Thanks for this render_component tip!
5d15c6821f3c3054c04b85471824ba7c?d=identicon&s=25 Dave Teare (Guest)
on 2006-03-14 17:50
(Received via mailing list)
I don't see why you need ajax for this.  Unless you plan on doing some
funky things on the server side, just do everything in JavaScript.  The
code below is from DevLists and it can be modified to do exactly what
your asking for.

<html>
<head>
  <script src="/javascripts/prototype.js"
type="text/javascript"></script>
  <script>
   function toggle() {
      if ($('main_img').src.search(/\/images\/flag-on.gif/i) != -1)
         $('main_img').src = '/images/flag-off.gif';
      else
        $('main_img').src = '/images/flag-on.gif';
   }
  </script>
</head>
<body>
  <img id="main_img" src="/images/flag-on.gif" onclick="toggle();"/>
</html>

Simply have a convention that all main images are named the same as
thumbnails, except for a _thm suffix; then use JS to strip the _thm
suffix and set the result as the src on the main image.  Doing it this
way will have side benefits: one less http request, faster user
response, and once the browser caches the images users can switch the
main image with zero http requests.

HTH.


On Tuesday, March 14, 2006, at 5:03 PM, szymek wrote:
>--
>Posted via http://www.ruby-forum.com/.
>_______________________________________________
>Rails mailing list
>Rails@lists.rubyonrails.org
>http://lists.rubyonrails.org/mailman/listinfo/rails


Cheers!
--Dave Teare
http://devlists.com - Email list management
http://palmsphere.com - Apps for your hand-held
F639e0cdf2fa098b535d6ec766b2aee1?d=identicon&s=25 Szymon Nowak (g0nzo)
on 2006-03-16 21:50
Hey thanks!

With all that ajax hype i forgot that i can achieve the same without it
:)

Thanks again!
This topic is locked and can not be replied to.