生成HTML使用Rails和jQuery不起作用

Question

我試着做一個按鈕，添加一個表單來創建一個任務擁有衆多用戶，我把這個：

$("#more").click(function(){ 
    i++; 
    $("#more").after("<%= select_tag 'user_id_"+i+"',options_for_select(User.all.map { |u| [u.email,u.id] }) %>"); 

}); 

右鍵這看起來是正常的，但這genetare的標籤Rails，出現這個：

< %= select_tag 'user_id_4',options_for_select(User.all.map { |u| [u.email,u.id] }) %><%= select_tag 'user_id_3',options_for_select(User.all.map { |u| [u.email,u.id] }) %><%= select_tag 'user_id_2',options_for_select(User.all.map { |u| [u.email,u.id] }) %> 

我該如何使這個代碼出現在Rails中？

UPDATE：

當我試圖把代碼的jQuery在我.html.erb此之前，不要執行，在application.js中：

<script type="text/javascript"> 
$(document).ready(function() { 

    var i = 1; 
    $("#more").click(function(){ 
     i++; 
     $("#more").after("<%= select_tag 'user_id_"+i+"',options_for_select(User.all.map { |u| [u.email,u.id] }) %>"); 

    }); 


}); 


</script> 

Answer 1

讓我們試一下，這是一個瘋狂的猜測，但我希望它能夠滿足你的需求。您可以在新的應用程序中嘗試此操作。只需創建一個用戶模型，然後播種一些數據，然後在您的資產組中添加gem'jquery-rails'。運行bundle install並重新啓動服務器。

在你資產/ Java腳本/ application.js中，確保你至少有下面幾行：

//= require jquery 
//= require jquery_ujs 
//= require_tree . 

在你users_controller.rb，定義指數方法來獲取所有用戶從數據庫和渲染索引模板，這是非常簡單的，你只需要這樣做：

def index 
    @users = User.all 

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

然後編輯您的視圖文件views/users並確保它的名稱爲index.html.erb。當您嘗試使用瀏覽器訪問本地主機：3000 /用戶時（詳細信息：這是一個GET HTML請求），將顯示此視圖。在您的視圖中，您將編寫HTML並嵌入紅寶石，就像您平時所做的一樣。現在只需創建一個div和你給它的ID爲「多」，你也放置一個鏈接與屬性remote

<%= link_to 'click me', users_path, remote: true %> 

然後在的意見/用戶並將其命名爲index.js創建一個新的視圖文件.erb。您注意到擴展名已更改，現在我們使用js.erb而不是html.erb。詳細說明：當你的頁面會做一個javascript請求（在這種情況下爲GET JS）到你的用戶＃index的路由，它會用回答index.js.erb查看。這裏最好的東西是你可以在這個視圖中編寫JavaScript代碼，它將在你的瀏覽器中執行。

您還記得我們添加了remote: true的鏈接嗎？這告訴軌道通常會產生JS請求的鏈接。魔法。

所以現在你只需要在你的views/users/index.js.erb文件中寫一些javascript代碼。讓我們先從一些超級簡單：

alert('Hello'); 

轉到您的頁面（通常是本地主機：3000 /用戶），然後單擊「按我」鏈接，你應該看到的JavaScript警告框顯示。

讓我們來做第二次測試，並集成一些ruby代碼。這個改變你對的意見/用戶/ index.js.erb的內容：

alert('Ruby compute: <%= 1+1 %>'); 

而在你的網頁，你會看到警報與測試「紅寶石計算：2」。您只需在您的應用程序中調整此技術即可。

同樣的技術（但具有更好的解釋）可以在此找到railscast：http://railscasts.com/episodes/136-jquery