rails渲染視圖onclick用javascript

Question

我想創建一個視圖，用戶可以點擊不同的按鈕並根據他們點擊的按鈕渲染不同的內容。我試着用JS完成這件事，但不能真正讓它工作。我做了我認爲一個按鈕：

<div class="link"> 
    <%= link_to "Greetings", "#" %> 
</div> 
<div id="show"></div> 

然後在job.js.erb：

$(function() { 
    $('.link').click(function() { 
    $('#show').append("<%=escape_javascript render(:partial => 'show' %>"); 
    }); 
}); 

不幸渲染的資產是不支持的，但我真的不知道最好的方法是什麼做到這一點。

Answer 1

一個可以嘗試的辦法是讓按鈕點擊進入一個控制器動作，通過AJAX，然後渲染名<action_name>.js.erb文件。這個文件然後將能夠調用render操作。

我將闡述更具有以下：

假設有問題的資源是Greetings，你必須在Greetings控制器dynamic_show動作，例如，你有一個dynamic_show_greetings_path路由到這個動作。

從您的視圖中，您可以：

<div class="link"> 
    <%= link_to "Greetings", dynamic_show_greetings_path, remote: true %> 
</div> 
<div id="show"></div> 

和Greetings#dynamic_show行動會像如下：

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

那麼，在您看來目錄，你有一個dynamic_show.js.erb文件，該文件將包含附加動態視圖的腳本，如下所示：

$('#show').html("<%=escape_javascript render(:partial => 'show') %>"); 

這就爲你解決了！

當然，現在要使其變成動態的，您必須將參數傳遞給控制器​​，然後根據得到的響應呈現內容。

PS：

• 設置鏈接上remote: true確保通話將是一個AJAX通話。
• 控制器默認行爲呈現同名的文件動作的名稱，因此，dynamic_show響應js將呈現dynamic_show.js.erb

希望這將引發大光把它給你...;）

Answer 2

這聽起來像你需要這個jQuery。

你可以用一個隱藏類將渲染的部分包裝在父div中。點擊按鈕時切換顯示內容。

http://api.jquery.com/show/

$('#your-button').click(function(e){ 
    $('.hidden-div').toggleClass('hide'); 
}); 

Answer 3

有兩種方法可以做到這一點。

首先，如果你想加載JS 上頁，你需要使用什麼@anchalee建議，並與某種在CSS「隱藏」類的預加載內容：

#app/assets/javascripts/application.js 
$(document).on("click", "a.hidden", function(e){ 
    e.preventDefault(); 
    el = $(this).attr("href"); 
    $(el).toggle(); 
}); 

#app/views/controller/your_view.html.erb 
<%= link_to "User", "#user", class: "hidden" %> 
<div id="user" class="hidden"> 
    Hello 
</div> 

這將需要由鏈路的href屬性指定的id任何的div，然後讓這取決於其當前狀態div將hide或show做到這一點。

-

其次，你有關閉頁方法（使用ajax）。

這用於從服務器獲取數據，並且將會載入以服務器爲中心的數據，例如您現在正在嘗試執行的操作。

這樣做其實很簡單：

#app/controllers/your_controller.rb 
class YourController < ApplicationController 
    layout: Proc.new{|c| !c.request.xhr? } 
end 

這將返回你需要沒有任何layout數據：

#app/assets/javascripts/application.js 
$(document).on("click", "#show", function(e){ 
    e.preventDefault(); 
    $.get($(this).attr("href"), function(data){ 
     $("#show").html(data); 
    }); 
}); 

#app/views/your_controller/show.html.erb 
<%= link_to "Show", [[url for page]], id: "show" %>