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>

的routes.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}",

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

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)) %>");

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

而不是改变选择标签javascript插入模板的动态选择

1 个答案: