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

Question

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

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

我现在想做的是，我想刷新右边的部分，比如说每10秒，这样它就会显示新添加的车辆。我从这个 stack overflow post 中构建了我当前的解决方案并且我能够确认我可以成功呈现 js 页面，如我的日志所示:

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

应用程序.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){});  
}