Question

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

现在，我在python中编写了另一个AI应用程序，用于处理视频（显示在rails应用程序页面的左侧），并使用捕获的车辆及其相应的车牌填充数据库（显示在视频旁边rails app）。意思是说，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 \ 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){});  
}

使用AJAX和JQuery

1 个答案: