2

したがって、私が見つけた唯一のものであるため、Rails 3ベータ版でjquery-uiスライダーを使用するこの古いチュートリアルに従っています。

スクリプトを持つ私のビュー

<p>
  <p>Showing all stocks between <span id="x_low_selected"><%= @price_range.first %></span> and <span id="x_high_selected"><%= @price_range.last %></span></p>
</p>
<div id="x_slider"></div>
<ul id="x_stock_list">
<%= render 'map' %>
</ul>
<script type="text/javascript">
  $(function() {
  $("#x_slider").slider( { 
    range: true,
    step: 1,
    max: <%= @price_range.last %>,
    min: <%= @price_range.first %>,
    values: [<%= @price_range.first %>, <%= @price_range.last %> ],
    stop: function(event, ui) {
    var prices = $('#x_slider').slider('option', 'values');
    $('#x_low_selected').html(prices[0]);
    $('#x_high_selected').html(prices[1]);
    $.ajax({
        url: 'http://localhost:3000/users',
        type: "GET",
        data: { low: prices[0], high: prices[1] },
        dataType: 'json'
    });
   }
  });
});
</script>

価格のモデル方法

def self.low_high_prices
  [User.minimum(:start), User.maximum(:end)]
end

ajaxが呼び出す必要があるコントローラーのindexメソッド

def index
  @users = User.all
  unless params[:low] && params[:high]
    @users = User.all
    @json = User.all.to_gmaps4rails do |user, marker|
    marker.infowindow "<a href=/users/#{user.id}> #{user.name} </a>"
    marker.title user.name
  end
else
  @json = User.where("start >= params[:low] AND end <= params[:high]).to_gmaps4rails do |user, marker|
    marker.infowindow "<a href=/users/#{user.id}> #{user.name} </a>"
    marker.title user.name
  end
end
@price_range = User.low_high_prices
  respond_to do |format|
    format.html # index.html.erb
    format.json { render json: @users }
  end
end

スライダーのスライドが停止したときに ajax 呼び出しがコントローラーに送信されない理由を知っている人はいますか? :remote => true を使用できるかどうかはわかりません。スライダーは div 内で生成されるためです。

ありがとう

また、現在Ruby 1.9.7でRails 3.2を使用しています

4

1 に答える 1

2

あなたの呼び出しはコントローラーに送られ、コントローラーは JSON データを返していると思います。

問題は、$.ajax受信した JSON データに対して呼び出しが何もしていないことです。

ajax 呼び出しで何らかの方法で返された JSON データを処理するには、コールバック関数を追加する必要があります。

$.ajax({
    url: 'http://localhost:3000/users',
    type: "GET",
    data: { low: prices[0], high: prices[1] },
    dataType: 'json',
    success: function (data) {
        alert("Success: " + data);
        //do something with the data here.
    }
});

また、コントローラーのコードを見ると@users、JSON データのコンテンツのみが返され、コンテンツやその他のものは返され@jsonません。それが意図したものかどうかはわかりません。

于 2012-10-15T22:09:44.043 に答える