2011-11-02 79 views
2

我有一個汽車經銷商和汽車的項目show.html我在頁面左側有照片庫和車輛信息在右側。車輛信息代碼是在部分名爲_vehicle_info和畫廊是_car_gallery這看起來像這樣:Rails 3渲染不同的局部使用鏈接

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

car_gallery我只能看到12張照片的車。

問題:

我想要做的是有近car_gallery DIV的鏈接,當用戶點擊它左側的部分vehicle_info將由局部car_gallery_all(這被替換部分包含該車的所有照片,不限於12)。 有沒有簡短的方法來做到這一點?請幫忙。

+0

這是一個JavaScript的事情。我爲你的問題添加了jQuery標籤。你需要去替換div的內容,這可以使用jQuery輕鬆完成。 – davidb

+0

您是否想在不刷新頁面的情況下完成此操作? – meagar

+0

是的,沒有刷新.. jquery標籤將是一個解決方案,但我正在尋找另一種方式,如果有的話。 – rmagnum2002

回答

6

編輯,由於缺乏銷售代表:

這將工作在Rails 3.1,不知道3.0或更低..

此外,davidb的答案是,如果我理解正確,負載所有的圖像,無論用戶是否想要查看它們 - 這種解決方案只會在用戶點擊鏈接查看時加載它們。

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

控制器
   def all_car_photos 
        ... 
        respond_to do |format| 
        format.js 
        end 
       end 

視圖
  <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") %>"); 

確定這樣的視圖包含指向該all_car_photos控制器動作的link_to方法。關鍵在於link_to包含:remote => true - 它使用Rails AJAX功能中的烘焙提交請求。

控制器動作做它需要做的事情,但用.js視圖響應 - all_car_photos.js.erb - 這包含一行jQuery,它將'列右'div的內容替換爲' car_gallery_all」部分..

現在已經晚了,但安裝程序應工作..

+0

我正在嘗試你的例子,我會看到結果。當我完成工作時,我會回答「回答接受」。謝謝。 – rmagnum2002

+0

不用擔心。這不是複製/粘貼代碼..它需要調整,但一般的想法會讓你得到你想要的。 – FiveOhOne

3

添加的鏈接,並給出一個ID給它。你使用「#」,因爲它沒有有效地鏈接到任何東西。

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

然後添加一些jQuery來你public/javascript/application.js(我只是使用軌道3不是3.1,因爲你的問題被標記像)來替換div的內容。

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

謝謝,我會試試這個作爲FiveOhOne asnwer的替代品。 – rmagnum2002