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

Question

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

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

我现在要做的是刷新右侧的部分，比如每 10 秒刷新一次，以便显示新添加的车辆。我从这个stack overflow 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\部分

#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'
| ");

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

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' %>");

或者如果您使用的是 slim：

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

无需再次传递@all_captured_violators。

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

$(document).ready(function () {
  setInterval(refreshPartial, 1000);
});

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