Javascript 在Rails 3应用程序中使用jQuery刷新div元素

Javascript 在Rails 3应用程序中使用jQuery刷新div元素,javascript,jquery,ruby-on-rails-3,Javascript,Jquery,Ruby On Rails 3,我有一个rails 3应用程序,它使用resque在后台运行长时间运行的作业,我想在另一个页面上创建一个结果视图 目前,我有这个方案的工作 Resque运行作业,并在作业进行时将信息写入数据库(更新信息条目)。作业完成后,它将更新其中一个数据库条目,即设置complete=1(创建complete时的值为0) 数据库模式是 create_table "refreshes", :force => true do |t| t.string "name" t.string

我有一个rails 3应用程序,它使用resque在后台运行长时间运行的作业,我想在另一个页面上创建一个结果视图

目前,我有这个方案的工作

Resque运行作业,并在作业进行时将信息写入数据库(更新信息条目)。作业完成后,它将更新其中一个数据库条目,即设置complete=1(创建complete时的值为0)

数据库模式是

create_table "refreshes", :force => true do |t|
    t.string   "name"
    t.string   "info"
    t.integer  "complete"
    t.datetime "created_at"
    t.datetime "updated_at"
end
应用程序中的另一个页面视图将通过调用其控制器并在页面上显示最新数据来显示数据库条目。如果数据库中的完整值不等于1,此视图具有插入标准JavaScript刷新元素的逻辑

view.html.erb

<% if  @refreshes.complete == 0 %>
 <meta http-equiv='refresh' content='5'>
<%end%>

<div id="data">
<p>
    <b>Name:</b>
    <%= @refreshes.name %>
</p>
<p>
    <b>Info:</b>
    <%= @refreshes.info %>
</p>
</div>
这一切都很好,但当complete设置为0时,它确实会每5秒重新加载一次完整的页面,我想做的只是刷新显示数据的div(div id=data),而不刷新整个页面

我认为这可以通过jquery和一些JavaScript来实现,但我找不到一种方法来实现,所以有人能帮忙吗?或者,即使你能给我指个方向,我也会很感激的 干杯
Mike

使用Jquery,您可以执行ajax调用,可以使用计时器反复调用

application.js 单击按钮或后台作业启动时调用此函数

updateDiv = function(){
$.ajax{
 url:'/controller/view.js?paramid='+id+'so..on='+so..on,
 method:get,
 success:function(){
  if (data.complete==1){
   //stop this
  }else{
   setInterval(updateDiv,5000);
  }
 }
在控制器内:::

def view
 //logic to find param
 render do|f|
  f.html
  f.js
 end
end
view.js.erb

#create a partial that can be rendered inside div 'data'
$('#data').render(<% partial %>);
or 
$('#data').html();
#创建可在div“data”中呈现的分部
$(“#数据”).render();
或
$('#data').html();

是的,这可以使用JavaScript完成。一种方法是

  • 要每n分钟刷新一次div,可以使用方法每n毫秒调用一次函数
  • 此函数应发出ajax请求,以从服务器获取数据并以HTML格式插入数据
  • 下面的代码使用jQuery,但您可以使用任何其他库来获得结果

        $(document).ready(function() {
            // get data every 5 mins and refresh myDiv
            var pingAfter = 5000;  
            var refreshId = setInterval(function() {
                $("#myDiv").load('/partial/data');
            }, pingAfter);
        });
    

    网站上有一个实现相同的示例代码

    谢谢两位,我会在周末尝试这两款
        $(document).ready(function() {
            // get data every 5 mins and refresh myDiv
            var pingAfter = 5000;  
            var refreshId = setInterval(function() {
                $("#myDiv").load('/partial/data');
            }, pingAfter);
        });