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

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

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

我现在想做的是，我想刷新右边的部分，比如说每10秒刷新一次，这样它就会显示新添加的车辆。我根据这个模式设计了当前的解决方案，我能够确认我能够成功呈现js页面，如我的日志所示：

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

application.js

//负责部分刷新

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

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

static\u pages\u controller.rb

def single_live
  @all_captured_violators = CapturedViolatorPlaceholder.all.order('capture_date DESC')

  respond_to do |format|
    format.html
    format.js
  end
end

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

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'

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

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

single_live.js.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'

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

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

\u captured\u vehicles\u 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

def single_live
  @all_captured_violators = CapturedViolatorPlaceholder.all.order('capture_date DESC')

  respond_to do |format|
    format.html
    format.js
  end
end

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

[工作汇报]

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

single\u live\u js.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'

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

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

我还删除了

$（“#captured_vehicles_live”）.html（数据）application.js

中选择code>，以避免两次呈现我的代码

application.js

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

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

---

你应该试着做以下事情：

single_live.js.slim

没有必要再次通过@all_-captured_违规者

不要忘了删除

$（“#捕获的_vehicles_live”）.html（数据）application.js

中的code>，因此它最终看起来像：

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

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

---

嗨，玛蒂亚斯！我试过了，但它产生了这个错误：

ActionView:：Template:：error（未知行指示符/home/cjay ipttu/Documents/Git/aicatch/app/views/static_pages/single_live.js.slim，第1行，第0列$（“#捕获的车辆_live”）.html（“”；^）：1:$（“#捕获的车辆(live”）.html（“”）哦，我只是在谷歌上搜索了一下，似乎这是一个很小的问题。我不知道该怎么办：（也许这会有用。这当然有用！我现在可以确定，插入新条目时，该部分正在更新。我在html中的显示方式方面遇到了另一个问题。将更新我的问题！非常感谢@Matias！非常高兴能提供帮助。您删除了$（“#捕获的车辆_live”）了吗.html（数据）；在$.get request？中，您的代码可能会呈现两次，因为您的代码看起来很好。您是否尝试过插入调试器工具（例如）以查看在
def single_life
中是否接收到更多数据？哦，是的，我尝试过在我的
def single_live
操作中添加一个参数，我得到的参数是：
“static\u pages”，“action”=>“single_live”，“format”=>“js”}允许：false>
但是你的
@所有被抓获的违反者的价值是什么？
？嗨@PeterHøjlundAndersen！在收到下面@Matias'线程的帮助后，它现在正在工作。我真的很感谢你的帮助！：）