Div 在下拉列表中选择值后未更新

Question

我正在尝试在选择州和城市时显示图表。

城市下拉列表根据在第一个下拉列表中选择的州进行填充。

问题是当我点击一个城市时没有图表显示，如果我改变选择也没有更新，我似乎无法找出问题所在。

我正在使用 ChartKick 显示一个饼图，其中包含控制器中查询给出的值。

我的代码如下：

controllers/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

views/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;

      }
    })

  })
  }
})

});
});

并且在部分中：views/city_stats/_city_stats。html.erb：

<%= pie_chart @spatial_ratio.rows %>

N.B ：如果我手动将控制器中动态查询中的 city_id 替换为随机 id，则会显示相应的图表刷新页面时城市，但我不知道为什么它不能动态工作

Answer 1

@city_id = City.select('id').find_by_id(params[:city])

此行没有 return 你的号码。它 return 是您模型的一个实例，只加载了一个字段 (id)。尝试将其更改为

@city_id = City.select('id').find_by_id(params[:city]).id

那会给你一个数字。

此外，正如我所见，在 $("#city_name").on('click') 中 AJAX 的处理程序中，您实际上并没有使用生成的图表更新视图。

<%= j render(partial: 'city_stats') %>

此行仅在 html 页面的初始呈现时评估一次（这就是为什么在手动设置 city_id 时一切正常），因此在每个 AJAX 请求中，没有完全重新加载您的页面，您将 $('#stats') 替换为相同的内容。

顺便说一句，一旦您替换了 $('#stats')，您将无法在下次不完全重新呈现页面的情况下访问它，因为它已从 DOM 中删除。请参阅 (replaceWith).

的参考资料

我认为在 AJAX 的情况下，最好在其中使用 .empty() on $('#stats') container and then .append() 新图表。

这个想法是，如果你想在不重新加载页面的情况下更新图表，你应该使用来自服务器的新数据。

success: function(data) {

在你的例子中，它将在 data 变量中。

我看到你的控制器中有这个：

format.js { 
  render json: { 
    html: render_to_string(
      partial: 'city_stats', 
      locals: { 
        city_id: @city_id,
        spatial_ratio: @spatial_ratio
    }) 
  }
}

所以你应该在你的处理程序中使用这个数据。可能是这样的：

success: function(data) {
    $('#stats').empty().append(data.html);
}

但是，我不确定在当前的实现中是否可以访问它。我猜你每次发出 AJAX 请求时，它都会以

结束

format.json  { render :json => @cities }

因此，您应该 return @cities 和此处呈现的部分，并在相关的成功回调中使用它们，或者以某种方式为每个请求分开响应。

关于代码的另一件事 - 将 $("#city_name") 的事件处理程序绑定到 $("#city_state") 的更改处理程序中是不好的，因为在 $("#city_state") 的每次更改中都添加相同的处理程序对于 $("#city_name") 单击，并且在每次单击时，此处理程序将执行它已绑定的次数。您可以在绑定之前使用 .off 来防止这种情况，但也许值得进行一些重构。

Answer 2

1.update 您的 city_stats 方法如下所示

def city_stats
  ...
  ...
  respond_to do |format|
   format.json  { render :json => @cities } 
   format.js
  end
end

2。使用以下代码创建 city_stats.js.erb 文件

$("#stats").html("<%= escape_javascript(pie_chart @spatial_ratio.rows) %>");

3。像这样更改您的 city_click 活动

  $("#city_name").on('click', function(){
    $.ajax({
      url: "/admin/city_stats",
      type: "GET",
      data: {city: $(this).val()},
      success: function(data) {
      }
    })
  });

这应该可以解决您的问题。如有problem/doubt评论

Div 在下拉列表中选择值后未更新

Div is not updated after selecting value on a dropdown list

javascript

jquery

ruby-on-rails

chartkick