0

我正在尝试创建动态选择，它开始以某种奇怪的方式工作。javascript 插入模板 html 的内容，而不是 select 标签的新选项

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。

4

1 回答 1

1

我在您的代码中看到了多个问题，我不知道您是否为了举例而更改了您必须编辑的实际代码，但它令人困惑，例如，

url: "#{update_pods_path}",

不应该工作，因为它似乎不在红宝石块内，你应该这样做

url: "<%= update_pods_path %>",

除非有什么我想念的。无论如何，除了所有其他可能的问题：

根本问题的答案是您请求的 url 错误。当你这样做时：

$.ajax({

在 jquery 中，它只是对您传递的 url 路径执行获取请求。您需要通过以下方式指定它是 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)) %>");

写得正确，楼层需要更新以匹配后者。

于 2012-12-13T02:04:07.020 回答