CODEWITHSUNDEEP
jqueryruby-on-railsrubyruby-on-rails-3
rmagnum2002
rmagnum2002

Reputation: 11421

Rails 3 render different partial using link

I have a project for a car dealer and in the car show.html I have photo gallery in the left side of the page and vehicle info in the right side. Vehicle info code is in a partial named _vehicle_info and gallery is in _car_gallery this is looking something like this:

<div id="column-left">
    <%= render :partial => "car_gallery" %>
</div>
<div id="column-right">
    <%= render :partial => "vehicle_info" %>
</div>

In the car_gallery I can see only 12 photos of the car.

The problem:

What I want to do is to have a link near car_gallery div, and when the user clicks on it the partial vehicle_info in the left side will be replaced by the partial car_gallery_all (this partial contains all the photos for that car, not limited to 12). Is there any short way to do this? Please help.

Upvotes: 2

Views: 2189

Answers (2)

FiveOhOne
FiveOhOne

Reputation: 86

Edit due to lack of rep:

This will work in rails 3.1, not sure about 3.0 or below..

Also, davidb's answer would, if I understand it correctly, load all of the images regardless of whether the user wants to view them or not - this solution would only load them if the user clicks on the link to view them..

..............................................................................

controller

                def all_car_photos
                  ...
                  respond_to do |format|
                     format.js
                  end
                end

view

            <div id="column-left">
                <%= render :partial => "car_gallery" %>
            </div>
            <div id="column-right">
                <%= render :partial => "vehicle_info" %>
            </div>
            <%= link_to "Show All Photos", path_to_controller_action(@car), { :method => :get, :remote => true} %>

all_car_photos.js.erb

            $('#column-right').html("<%= escape_javascript(render "car_gallery_all") %>");

Ok so, the view contains the link_to method which points to the all_car_photos controller action. The key thing here is that the link_to contains :remote => true - this submits the request using the baked in Rails AJAX functionality.

The controller action does what it needs to do, but responds with the .js view - all_car_photos.js.erb - This contains a line of jQuery which will replace the content of the 'column-right' div with the 'car_gallery_all' partial..

It's late, but that setup should work..

Upvotes: 6

davidb
davidb

Reputation: 8954

Add the link and give an id to it. You use the "#" because it does not link to anything effectifly.

<%= link_to "my link text", "#", :id => "replace_vehicle_info" %>

Then you add some jQuery to your public/javascript/application.js (I except you use rails 3 not 3.1 because your question is tagged like that) to replace the content of that div.

$("#replace_vehicle_info").click(function() {
     $("#vehicle_info").replaceWith(<your html here>)
})

Upvotes: 3

Related Questions