而不是更改選擇標記javascript插入模板的動態選擇

Question

我想創建動態選擇，它開始以某種奇怪的方式工作。而不是爲選擇標記新的選擇，javascript中插入模板的HTML內容

index.html.erb

<%= collection_select(nil, :site_id, @sites, :id, :name, {:prompt => "Select a Site"}, { :id => "sites_select"}) %> 
           <br/> 
         <%= collection_select(nil, :floor_id, @floors, :id, :name, {:prompt => "Select a Floor"}, {:id => "floors_select"}) %> 
         <br/> 
         <%= collection_select(nil, :pod_id, @pods, :id, :name, {:prompt => "Select a pod"}, {:id => "pods_select"}) %> 
         <script> 
           $(document).ready(function() { 
           $("#sites_select").change(function(){ 
             $.ajax({ 
              url: "#{update_floors_path}", 
              //orther options ... 
              success: function(data){ 
               site_id : $('#sites_select').val() 
               $("#floors_select").html(data); 
              } 
             }); 

            }); 
           $("#floors_select").change(function(){ 
             $.ajax({ 
              url: "#{update_pods_path}", 
              //orther options ... 
              success: function(data){ 
               floor_id : $('#floors_select').val() 
               $("#pods_select").html(data); 
              } 
             }); 

            }); 

           }); 
          </script> 

來源：

<select id="floors_select" name="[floor_id]"> 


    <title>ELS Reservation Tool</title> 
    <link href="/assets/style.css?body=1" media="screen" rel="stylesheet" type="text/css"> 

<meta content="authenticity_token" name="csrf-param"> 
<meta content="3F+WpxiRZx+7u9POFOgeRHZ0QlhMrs3ccLnvUgjodio=" name="csrf-token"> etc... 

devices_controller.rb

#for dynamic select 
    def update_floors 
    # updates floors and pods based on genre selected 
    site = Site.find(params[:site_id]) 
    # map to name and id for use in our options_for_select 
    @floors = site.floors.map{|a| [a.name, a.id]}.insert(0, "Select a Floor") 
    @pods = site.pods.map{|s| [s.name, s.id]}.insert(0, "Select a Pod") 

    respond_to do |format| 
     format.js 
     end 
    end 

    def update_pods 
    # updates pods based on floor selected 
    floor = Floor.find(params[:floor_id]) 
    @pods =floor.pods.map{|s| [s.name, s.id]}.insert(0, "Select a Pod") 

     respond_to do |format| 
      format.js 
      end 
    end 




    <title>ELS Reservation Tool</title> 
    <meta http-equiv="refresh" content="10000; URL=http://els-hq-reserve:3000/"> 
    <link href="/assets/style.css?body=1" media="all" rel="stylesheet" type="text/css"> 













    <meta content="authenticity_token" name="csrf-param"> 
    <meta content="3F+WpxiRZx+7u9POFOgeRHZ0QlhMrs3ccLnvUgjodio=" name="csrf-token"> 


    <!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 





    <div id="header"> 
     <img src="/images/elspmrt.png">  
    </div> 
    <div id="navigation"> 
     <ul> 
      <li><a href="#">Saved Views</a></li> 
      <li><a href="#">Power Group</a></li> 
      <li><a href="#">Reserved</a></li> 

     </ul> 
    </div> 
     <div id="content-container1"> 


    <div id="content"> 
    <div class="container"> 
     <h2>Search</h2> 

       <form accept-charset="UTF-8" action="/devices" method="get"><div   style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div> 
       <label for="label">Super Search:</label> 
        <input id="superstring" name="superstring" type="text"> 




       <input name="commit" type="submit" value="Search"> 

</form>    

路線.rb

get 'devices/update_floors', :as => 'update_floors' 
     get 'devices/update_pods', :as => 'update_pods' 
     root :to => "devices#index" 

update_floors.js.erb

# app/views/devices/update_floors.js.erb 
$('#floors_select').html("#{escape_javascript(options_for_select(@floors))}"); 
$('#pods_select').html("#{escape_javascript(options_for_select(@pods))}"); 

update_pods.js.erb

# app/views/home/update_pods.js.erb 
$('#pods_select').html("<%= escape_javascript(options_for_select(@pods)) %>"); 

任何意見，將不勝感激，謝謝，D.

Answer 1

有多種問題，我請參閱您的代碼，我不知道您是否正在更改要編輯示例的實際代碼，但它會令人困惑，例如，

url: "#{update_pods_path}", 

不應該是因爲它的工作doesen't似乎是一個紅寶石塊內，你應該做

url: "<%= update_pods_path %>", 

，除非有我丟失的東西。總之，除了所有其他可能的問題：

根本問題的答案，是你要求錯誤的網址。當你這樣做：

$.ajax({ 

在jquery中，它只是對你傳遞的url路徑進行get請求。你需要指定它是jQuery的一個JS的要求，通過如下：

$.getScript(url, function(data, textStatus, jqxhr) { 

}); 

此外，除非您請求JSON，或者你真正想要原始的HTML（僅當您直接從撕心裂肺部分的HTML控制器），你不應該對響應做任何事情，JS響應應該直接替換或更新視圖。它只是直接返回myresponse.js.erb文件中的JavaScript，然後在頁面上執行它。 - 以下應該是你需要的全部：

$.getScript(url); 

你的JS響應應該對你的頁面進行修改。它看起來像你的

update_pods.js.erb 
$('#pods_select').html("<%= escape_javascript(options_for_select(@pods)) %>"); 

被寫入正確，樓層將需要更新以匹配後者。