0

動的選択を作成しようとしていますが、奇妙な方法で機能し始めました。select タグの新しいオプションの代わりに、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.

4

1 に答える 1

1

あなたのコードには複数の問題があります。例を示すために編集する必要のある実際のコードを変更したかどうかはわかりませんが、たとえば、

url: "#{update_pods_path}",

ルビーブロック内にあるようには見えないので、動作してはいけません。

url: "<%= update_pods_path %>",

私が欠けているものがない限り。とにかく、他のすべての考えられる問題は別として：

根本的な問題への答えは、間違ったURLを要求しているということです。あなたがするとき：

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

正しく書かれている場合は、後者に一致するようにフロアを更新する必要があります。

于 2012-12-13T02:04:07.020 に答える