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?
Thanks,
Jim
_________________________________________________________________
Express yourself instantly with MSN Messenger! Download today - it''s
FREE!
http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
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
--------------------------------------------------
<div id="div_list_edit<%= @pic.id %>">
<img src="bob.jpg" onclick="do_preview" >
</div>
<div id="preview"></div>
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 src="<%= @pic.image_url %>"> #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
On 8/9/06, Jim Weir <javawaba@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?
>
> Thanks,
> Jim
>
> _________________________________________________________________
> Express yourself instantly with MSN Messenger! Download today -
it''s FREE!
> http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
>
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails/attachments/20060809/a463e1c0/attachment.html
On 8/9/06, Jim Weir <javawaba@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
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 Nayagam http://senthilnayagam.com -- Posted via http://www.ruby-forum.com/.
>From: "Max Muermann" <ruby@muermann.org> >Reply-To: rails@lists.rubyonrails.org >To: rails@lists.rubyonrails.org >Subject: Re: [Rails] AJAX image manipulation >Date: Thu, 10 Aug 2006 09:56:28 +1000 > >On 8/9/06, Jim Weir <javawaba@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 >_______________________________________________ >Rails mailing list >Rails@lists.rubyonrails.org >http://lists.rubyonrails.org/mailman/listinfo/railsInitially 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, <center> <% for pic in @pics %> <td> <span onmouseover="document.rollimg.src=''<%=pric.image_url %>'';"> <img src="<%= pic.image_url %>" width="50" height="50" border="0" alt="Images" /> </span> </td> <% end %> </center> <p align="center"> <img src="<%=pic.image_url %>" width="350" height="450" border="0" alt="" name="rollimg" /> </p> 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/
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 %>
...
<img src="<%=@pic.image_url %>" width="350"
height="450" border="0"
alt="" name="rollimg" />
<% end %>
On 8/11/06, Jim Weir <javawaba@hotmail.com> wrote:>
> >From: "Max Muermann" <ruby@muermann.org>
> >Reply-To: rails@lists.rubyonrails.org
> >To: rails@lists.rubyonrails.org
> >Subject: Re: [Rails] AJAX image manipulation
> >Date: Thu, 10 Aug 2006 09:56:28 +1000
> >
> >On 8/9/06, Jim Weir <javawaba@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
> >_______________________________________________
> >Rails mailing list
> >Rails@lists.rubyonrails.org
> >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,
>
> <center>
> <% for pic in @pics %>
> <td>
> <span
onmouseover="document.rollimg.src=''<%=pric.image_url
%>'';">
> <img src="<%= pic.image_url %>"
width="50" height="50" border="0"
> alt="Images" />
> </span>
> </td>
>
>
> <% end %>
> </center>
> <p align="center">
> <img src="<%=pic.image_url %>" width="350"
height="450" border="0"
> alt="" name="rollimg" />
> </p>
>
> 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/
>
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails/attachments/20060811/91f376ee/attachment.html
>> Canyou tell me how to reference a specifc image in the pics collection?I tried pic.image_url[0] but it didn''t work... Try window.document.getElementsByTagName(''img'') for the collection. Then you can access with the [x] to the specific img you want. Hope it helps.
>From: "Iglesias Sánchez, Oscar" <iglesio@mapfre.com> >Reply-To: rails@lists.rubyonrails.org >To: rails@lists.rubyonrails.org >Subject: RE: [Rails] AJAX image manipulation >Date: Fri, 11 Aug 2006 08:43:16 +0200 > > >> Canyou tell me how to reference a specifc image in the pics collection? >I >tried pic.image_url[0] but it didn''t work... > >Try window.document.getElementsByTagName(''img'') for the collection. > >Then you can access with the [x] to the specific img you want. > >Hope it helps. > >_______________________________________________ >Rails mailing list >Rails@lists.rubyonrails.org >http://lists.rubyonrails.org/mailman/listinfo/railswhat is happening is that I loop thru a collection and show all my images in thumbnails, that last picture is always show in the large view, I want the first image...>From the original code I posted I don''t know what you mean....Jim _________________________________________________________________ Express yourself instantly with MSN Messenger! Download today - it''s FREE! http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
> > >> Canyou tell me how to reference a specifc image in the pics collection? > >I > >tried pic.image_url[0] but it didn''t work... > > > >Try window.document.getElementsByTagName(''img'') for the collection. > > > >Then you can access with the [x] to the specific img you want. > > > >Hope it helps. > > > >_______________________________________________ > >Rails mailing list > >Rails@lists.rubyonrails.org > >http://lists.rubyonrails.org/mailman/listinfo/rails > > what is happening is that I loop thru a collection and show all my images in > thumbnails, that last picture is always show in the large view, I want the > first image... > > >From the original code I posted I don''t know what you mean....@pics.first.image_url Michael