0

私は次のコードを持っています

モデル

class Tender < ActiveRecord::Base
attr_accessible :title, :buyer_name, :category, :opening_date, :closing_date, :bid_amount, :description, :status

end

コントローラ（インデックスアクション）

class TendersController < ApplicationController

    before_filter :signed_in_user


  def index
    if signed_in?
         @tenders= Tender.where("company_id= ? ", current_user.company.id )  

    end

    respond_to do |format|
      format.html # index.html.erb
      format.js
      format.json { render json: @tenders }

    end
  end

表示（インデックスページ）

<div class="span6 offset3" >  


        Filter by status &nbsp;

        <%= form_tag tenders_path, :remote => true, :method=>'post' do %>
            <%= select_tag("status", options_for_select([['Open', 'Opem'],
                ['Closed', 'Closed'],['Won','Won']])) %>

        <% end %>                       

        <div id="flash"> </div>    

    </div>

</div>


<table border="1" id="tender_table">
  <tr>
    <th>Title</th>
    <th>Bid amount</th>
   </tr> 

<% @tenders.each do |tender| %>
  <tr>
    <td><%= tender.title %></td>
    <td><%= tender.status %></td>    
  </tr>
<% end %>
</table>

私も持っていtenders.js.coffeeますindex.js.erb

レール3.2.2とルビー1.9を使用しています

私がやりたいのは、ユーザーにコンボボックスからステータスを選択させることです。次に、onchangeイベントを使用して、選択した値をコントローラーアクションに送信します（インデックスアクションである必要があると思いますが、間違っている場合は修正してください）。選択されたステータスに基づいて、dbから入札のリストをフェッチし、それらのリストをビューに送信して、インデックスページに表示（現在のテーブルを置き換える）できるようにします。これまでのところ、私はAjaxを使おうとしています。どんな助けでもいただければ幸いです。私はこれに4日以上費やし、何をすべきか理解できませんでした。

さらに説明が必要な場合に備えて、元の質問はここにあります。ちなみに、jquery、javascript、さらにはプロトタイプを使用して動作するonchangeイベントを理解することもできませんでしtenders.js.coffeeたindex.js.erb

4

2 に答える 2

1

私はAJAXがあなたの問題の唯一の解決策ではないと思っていました。たぶん、DOMで入札にマークを付けてから、JavaScriptで直接非表示にして表示することができます。このことを考慮：

#tenders/index.html.erb
#...
<% @tenders.each do |tender| %>
  <tr class="<%= tender.status %>">    <!-- Now we know which ones are closed -->
    <td><%= tender.title %></td>
    <td><%= tender.status %></td>    
  </tr>
<% end %>
#...

$(document).ready(function(){
  $('#my_select_box_id').change(function(){
    var class = $(this).val();
    $('tr.' + class).show();
    $('tr[class!=' + class + ']').hide();
  });
});

バックエンド要求が含まれないため、はるかに高速になるはずです。テンプレートにはレンダリング時に必要なすべての情報がすでに含まれているため、バックエンドに別のリクエストを煩わせる必要がないため、私にとってはより理にかなっています。幸運を。

于 2012-07-13T06:42:33.977 に答える
0

とても簡単ですが、かなり多くの場所で小さなことをしなければなりません。Ajaxは正しい選択だと思います。あなたが言ったように、最初にAJAXリクエストを処理するコントローラーアクションが必要です。これはインデックスアクションである可能性がありますが、私には検索アクションのように見えます。

class TendersController < ApplicationController
  # You can extend this later if you need to search by other options
  # Just coding for today ;-)
  def search_by_status
    @tenders = Tender.find_all_by_status params[:status]

    #I think this does not even have to be here
    respond_to do |format|
      format.js
    end
  end
end

次に、テンプレートtenders / search_by_status.js.erb（search_by_status.html.erbの場合もありますが、このテンプレートがAJAXで使用されていることを明確にしたい）を作成し、そこにマークアップを配置する必要があります。

次に、jQuery（私はCoffeeScriptをあまり使用しません）を使用して、次のことができます。

$(document).ready(function(){
  $('#my_select_box_id').change(function(){
    $.ajax({
      url: 'tenders/search_by_status?status=' + $(this).val() //or your custom address
      success: function(serverResponse){
        $('#my_target_element_id').html(serverResponse);      //update the DOM
      }
    })
  });
});

または、この動作をjavascript疑似クラスにカプセル化し、$（document）.readyでPseduoClass.init（）のみを呼び出すこともできますが、これは簡単な解決策であり、後で調整できます。

私はこれをその場で作成しているので、100％正確ではないものもありますが、一般的にはそれでうまくいくはずです。問題があれば教えてください;-)。

于 2012-07-13T06:31:38.920 に答える