用Javascript呈現部分內容

我有一個加載到單選按鈕列表中的項目列表。當其中一個項目被點擊時，我想在該頁面的其他位置顯示關於該項目的其他信息。例如，我列出了不同類型的酒店房間。如果用戶點擊特定的房間類型，我想以不同的差異顯示該房間的估計成本。用Javascript呈現部分內容

經過大量的搜索，我碰到這個帖子：Rails + Radio Buttons + AJAX: How to render partial on radio button click?。它給了我使用partials的想法;但是答案並沒有爲我提供足夠的指導，所以我對部分內容做了一些解讀。我結束了以下內容：

在我的主要觀點

<% @available_rooms.each do |rt| %> 
    <div class="radio-item"> 
     <%= b.radio_button :room_type, rt.id, :class => 'rb_room_type inline', :onclick => 'render_room_info();' %> 
     <%= content_tag :span, rt.name %> 
     <a data-toggle="tooltip" data-placement="right" title="<%= rt.description %>"> 
      <%= image_tag "tooltip.png", :class=>"tooltip-icon" %> 
     </a> 
    </div> 
<% end %> 

<div id="estimated-due" class="group column-2"> 
</div>

我的局部視圖名爲_room_details.html.erb

<span class="booking-est-cost">Estimated Cost: &pound;<%= rt.room_price %></span>

JavaScript文件

function render_room_info() { 
    $("#estimated-due").html("<%= j render :partial => 'room_details', locals => { :rt => @rt } %>"); 
}

從我讀過的一切，這應該工作。然而，當我點擊一個單選按鈕時，它呈現出div中的文字html字符串：

<%= j render :partial => 'room_details', locals => { :rt => @rt } %>

所以很明顯，rails代碼不會觸發。由於JavaScript是客戶端，我想這是有道理的，但我無法真正弄清楚如何使這項工作。我閱讀了幾篇文章，討論瞭如何做Ajax請求，但他們似乎對我需要做的事情嚴重矯枉過正（更不用說太複雜了）。我錯過了一些簡單的東西嗎我只需要點擊單選按鈕來渲染一個或兩個字段的值。

就像一個參考，我使用的是Rails 4.2。

來源

2015-09-28 Shane McGarry

Where /什麼是「Javascript文件」？ –

如果您點擊單選按鈕時只顯示少量額外信息 - 並且不想打擾AJAX - 您可以將div存在於頁面中但使用CSS隱藏（例如'display：none ;'）。然後當點擊單選按鈕時，JavaScript函數會顯示div。 – bunnmatt

您需要向rails路線提交ajax請求。因爲你是從單選按鈕這樣做，你可以這樣做：

function render_room_info() { 
    $.ajax({ 
      url: room_rate?rt=xx, 
      dataType: "script" 
     }); 
}

然後，在上述規定的路線動作需要一個Ajax請求作出迴應：

#some logic to get set the @rt variable 
@rt = params[:rt] 

respond_to do |format| 
     format.html { 
     } 
     format.js { 
     } 
    end

，然後你把你的指令要根據控制器動作的名字用js文件中的部分替換，例如room_rate.js

$("#estimated-due").html("<%= j render :partial => 'room_details', locals => { :rt => @rt } %>");

來源

2015-09-29 02:51:13

那麼我需要爲此創建一個完全不同的控制器嗎？ room_rate控制器也具有相關視圖？或者你的意思是使用現有的控制器和room_rate（或類似的東西）是在控制器中定義的動作和相關的視圖？只是想澄清。 –

對不起，我不清楚。它不需要是它自己的控制器，只需要一個具有相關視圖的操作（* .js文件是ajax請求的視圖），當然還有一條到該操作的路徑。然後在$ .ajax調用中使用該路由到該路由。 –

我更新了參考控制器操作的答案，而不是控制器 –

用Javascript呈現部分內容

回答

相關問題