使用AJAX和JQuery在设定的时间间隔刷新rails部分 [英] Refreshing a rails partial on a set time interval using AJAX and JQuery
问题描述
我的rails应用程序中有一个页面如下：
现在，我在python中编写了另一个AI应用程序处理视频（显示在rails应用程序页面左侧）并使用捕获的车辆及其相应的牌照填充数据库（显示在rails应用程序中的视频旁边）。这意味着，rails和python应用程序都有一个共享数据库。
我现在要做的是我要刷新右边的部分，比如每10个秒，以便显示新添加的车辆。我从这个
然而，尽管添加了新条目，部分仍然只显示一个条目。我需要手动刷新页面才能显示所有新条目。我不确定我犯了什么错误。以下是我到目前为止的以下相关代码：
application.js
//负责任对于部分刷新
$（document）.ready（function（）{
setInterval（refreshPartial，1000）;
}）;
函数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?COUNTERstyle =border：0 none transparent; min - 高度：200px;最大高度：600px; height =100％width =100％frameborder =0]
.six.wide.column
.ui.segment
h1.ui.center.aligned.header
|捕获的许可证牌
=渲染'capture_vehicles_live'
single_live.js .slim
=渲染部分：'captured_vehicles_live'，数据：@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％;身高：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'training_violator [license_plate_text]'，violator.license_plate_text
= hidden_field_tag'training_violator_placeholder [id] '，violator.id
= hidden_field_tag'违规[name]'，violator.violation
= hidden_field_tag'进攻[location]'，violator.location
= hidden_field_tag'incmpence [car_image_filename]'， violator.car_image_filename
= hidden_field_tag'incence [license_plate_image_filename]'，violator.license_plate_image_filename
.row.center.aligned
= submit_tagEncode，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渲染'captured_vehicles_live'
|）;
我还删除了 $（＃captured_vehicles_live）。html（数据）; 来自我的 application.js ，以避免两次渲染我的代码。
application.js
$（document）.ready（function（）{
setInterval（refreshPartial，1000）;
}）;
函数refreshPartial（）{
$ .get（/ single_live.js，function（data）{}）;
}
你应该尝试做类似的事情：
single_live.js.slim
$（＃captured_vehicles_live）。html（<％= j render'training_vehicles_live'％>）;
或者如果你使用纤细：
| $（＃captured_vehicles_live）。html（
= j渲染'captured_vehicles_live'
|）;
无需再次传递@all_captured_violators。
不要忘记在 application.js $（＃captured_vehicles_live）。html（data）; c $ c>所以最终看起来像：
$（文件）.ready（function（）{
setInterval（refreshPartial，1000）;
}）;
函数refreshPartial（）{
$ .get（/ single_live.js，function（data）{}）;
}
I have a page in my rails application that looks like:
Now, I have another AI application coded in python that processes a video (displayed on the left of a page of the rails app) and populates the database with the captured vehicles and their corresponding license plates (displayed beside the video in the rails app). Meaning to say, the rails and python applications have a shared database.
What I want to do now is that I want to refresh the partial on the right, say every 10 seconds so that it will show the newly added vehicles. I patterned my current solution from this stack overflow post and I was able to confirm that I can successfully render the js page as shown in my logs:
However, the partial still shows just one entry despite adding a new entry. I need to manually refresh the page for it to show all new entries. I am not sure where I made a mistake. Here are the following relevant codes that I have so far:
application.js
//Responsible for the partial refresh
$(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'
[WORKING UPDATE]
After trying to apply the recommendations below of @Matias Seguel, I now have this code:
single_live_js.slim
| $("#captured_vehicles_live").html("
= j render 'captured_vehicles_live'
| ");
I also removed the $("#captured_vehicles_live").html(data); from my application.js to avoid rendering my code twice.
application.js
$(document).ready(function () {
setInterval(refreshPartial, 1000);
});
function refreshPartial() {
$.get("/single_live.js", function(data){});
}
You should try doing something like:
single_live.js.slim
$("#captured_vehicles_live").html("<%= j render 'captured_vehicles_live' %>");
or if you are using slim:
| $("#captured_vehicles_live").html("
= j render 'captured_vehicles_live'
| ");
There is no need to pass @all_captured_violators again.
Do not forget to also remove $("#captured_vehicles_live").html(data); in the application.js so it would finally look like:
$(document).ready(function () {
setInterval(refreshPartial, 1000);
});
function refreshPartial() {
$.get("/single_live.js", function(data){});
}
这篇关于使用AJAX和JQuery在设定的时间间隔刷新rails部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
