使用AJAX和JQuery在设定的时间间隔刷新rails部分

我的rails应用程序中有一个页面，如下所示：

现在，我有另一个用python编写的AI应用程序来处理video（显示在rails应用程序页面的左侧），并使用捕获的车辆及其相应的牌照填充数据库（显示在rails应用程序中的video旁边） 。 意思是说，rails和python应用程序有一个共享数据库。

我现在要做的是，我想刷新右边的部分，比如说每10秒一次，这样它就会显示新添加的车辆。 我从这个堆栈溢出post中模拟了我当前的解决方案，我能够确认我可以成功呈现js页面，如我的日志中所示：

但是，尽管添加了新条目，部分仍然只显示一个条目。 我需要手动刷新页面才能显示所有新条目。 我不确定我犯了什么错误。 以下是我目前的相关代码：

application.js //负责部分刷新

 $(document).ready(function () { setInterval(refreshPartial, 1000); }); function refreshPartial() { $.get("/single_live.js", function(data){ $("#captured_vehicles_live").html(data); }); } 

static_pages_controller.rb

 def single_live @all_captured_violators = CapturedViolatorPlaceholder.all.order('capture_date DESC') respond_to do |format| format.html format.js end end 

single_live.html.slim

 .ui.container style="margin-top: 100px;" .ui.container h1.ui.center.aligned.header Camera 1 .ui.divider .ui.left.aligned.grid.stackable .ten.wide.column .ui.segment image[src="http://62.242.189.219:80/mjpg/video.mjpg?COUNTER" style="border: 0 none transparent; min-height: 200px; max-height: 600px;" height="100%" width="100%" frameborder="0"] .six.wide.column .ui.segment h1.ui.center.aligned.header | Captured License Plates = render 'captured_vehicles_live' 

single_live.js.slim

 = render partial: 'captured_vehicles_live', data: @all_captured_violators 

_captured_vehicles_live.html.slim \ partial

 #captured_vehicles_live.ui.segment style="height: 450px; margin-top: 15px; overflow:scroll;" .ui.grid.stackable - @all_captured_violators.each do |violator| .row.ui.basic.segment .six.wide.column = image_tag "/MASTER/IMAGES/#{violator.car_image_filename}", style: "width: 100%; height: 100%;" .ten.wide.column = form_tag encode_license_plate_path do .row .ui.form .two.fields .field = image_tag("/MASTER/PLATES/#{violator.license_plate_image_filename}") .field = text_field_tag 'captured_violator[license_plate_text]', violator.license_plate_text = hidden_field_tag 'captured_violator_placeholder[id]', violator.id = hidden_field_tag 'violation[name]', violator.violation = hidden_field_tag 'offense[location]', violator.location = hidden_field_tag 'offense[car_image_filename]', violator.car_image_filename = hidden_field_tag 'offense[license_plate_image_filename]', violator.license_plate_image_filename .row.center.aligned = submit_tag "Encode", class: 'fluid ui button primary' .ui.divider 

routes.rb

 get '/single_live' => 'static_pages#single_live' 

[工作更新]

在尝试应用以下@Matias Seguel的建议后，我现在有了这个代码：

single_live_js.slim

 | $("#captured_vehicles_live").html(" = j render 'captured_vehicles_live' | "); 

我还删除了$("#captured_vehicles_live").html(data); 从我的application.js中避免两次渲染我的代码。

application.js

 $(document).ready(function () { setInterval(refreshPartial, 1000); }); function refreshPartial() { $.get("/single_live.js", function(data){}); } 

Answer 1

你应该尝试做类似的事情：

single_live.js.slim

 $("#captured_vehicles_live").html("<%= j render 'captured_vehicles_live' %>"); 

或者如果你使用苗条：

 | $("#captured_vehicles_live").html(" = j render 'captured_vehicles_live' | "); 

没有必要再次传递@all_captured_violators。

不要忘记也删除$("#captured_vehicles_live").html(data); 在application.js ，它最终看起来像：

 $(document).ready(function () { setInterval(refreshPartial, 1000); }); function refreshPartial() { $.get("/single_live.js", function(data){}); }