2
州と都市を選択したときにグラフを表示しようとしています。ドロップダウンリストで値を選択した後に部門が更新されない
都市のドロップダウンリストは、最初のドロップダウンの状態の選択に基づいて作成されます。
問題は、都市をクリックするとグラフが表示されず、選択を変更しても更新されず、問題を把握できないように見えることです。
私はChartKickを使用して、コントローラのクエリで指定された値を持つ円グラフを表示しています。
次のように私のコードは次のとおりです。
コントローラ/ city_stats_controller.rb：
def city_stats
@state = params[:state]
@cities = City.where(:state => @state).select(:id, :display_name).uniq.order('display_name ASC')
# @city_id = City.select('id').where(:state => params[:city_state]).where(:name => params[:city_name])
@city_id = City.select('id').find_by_id(params[:city])
dynamic_query = ActiveRecord::Base.send(:sanitize_sql_array, ['SELECT COALESCE(name) as name, count(*) FROM (SELECT name, regs.segment_id, count(*) FROM regs
INNER JOIN segments ON regs.segment_id = segments.id
WHERE regs.city_id = ?
GROUP BY segment_id, name
ORDER BY count(*) DESC) as tabe
GROUP BY name;', @city_id])
@spatial_ratio = ActiveRecord::Base.connection.select_all(dynamic_query)
puts @city_id.inspect #I can see the value printed in the terminal
puts @spatial_ratio.inspect #Same here, even after changing the selection
respond_to do |format|
format.json { render :json => @cities }
format.js {
render json: {
html: render_to_string(
partial: 'city_stats',
locals: {
city_id: @city_id,
spatial_ratio: @spatial_ratio
})
}
}
format.html
end
end
ビュー/ city_stats/city_stats.html.erb：
<div class="row">
<label>State <span>:</span></label>
<%= collection_select :city, :state, City.select(:state).uniq.order('state ASC'), :state, :state, {:prompt => 'Select a State'}, {id: 'city_state', multiple: false} %>
<label>City <span>:</span></label>
<%= collection_select :city, :name, [], :name, :name, {:prompt => 'Select a City'}, {id: 'city_name', multiple: false} %>
</div>
<div id="cities">
<!-- Here I render the cities list upon selecting a state-->
<%= render :partial => 'city_stats', :object => @cities %>
</div>
<div id="stats">
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#city_state").on('change', function(){
$.ajax({
url: "/admin/city_stats",
type: "GET",
data: {state: $(this).val()},
success: function(data) {
$("#city_name").children().remove();
// Create options and append to the list
var listitems = [];
$.each(data,function(key, value) {
listitems += '<option value="' + value.id + '">' + value.display_name + '</option>';
});
$("#city_name").append(listitems);
//console.log(listitems);
$("#city_name").on('click', function(){
$.ajax({
url: "/admin/city_stats",
type: "GET",
data: {city: $(this).val()},
success: function(data) {
var content = $("#city_name").val()
console.log(content);
$('#stats').replaceWith("<%= j render(partial: 'city_stats') %>");
return content;
}
})
})
}
})
});
});
と部分で：ビュー/city_stats/_city_stats.html.erb：
<%= pie_chart @spatial_ratio.rows %>
NBコントローラの動的クエリのcity_idを手動でランダムidに置き換えた場合、ページを更新すると対応する都市のグラフが表示されますが、動的に動作しない理由はわかりません。
市のクリックイベントは機能していますか？ 。私はあなたが都市を変えるとき、それがサーバーを打つのを意味します。 – krishnar
こんにちは@krishnarあなたの答えをもう一度感謝！はい、私は都市を変更すると、私はターミナルでだけでなく、ブラウザのコンソールで新しいcity_idを見ることができます – GeoSal
遅く応答して申し訳ありません。私のチェックの解決策はできますか？ – krishnar