自动刷新<div>而不重新加载整个页面</div>

时间:2013-03-07 14:18:45

标签: ruby-on-rails ajax ruby-on-rails-3

我正在尝试更新“mydiv”的内容而不刷新整个索引页面。 @mydata由mycontroller提供。我需要每隔 n 秒重新计算一次并将其传递给“mydiv”

使用“link_to”就可以了!

index.html.erb

<%=
    link_to('refresh', '/mycontroller/index', :remote => true)
%>

<div id="mydiv">
    <%=
        @mydata
    %>
</div>

index.js.erb的

$('#mydiv').html('<%= escape_javascript(@mydata) %>')

现在我需要每隔 n 秒自动刷新“mydiv”的内容(所以不要点击链接)。我尝试过以下解决方案:

但没有运气。

在我的 application.js 中,我写了这个:

function executeQuery() {
  $.ajax({
    //url: '/index',
    success: function(data) {
      $('#mydiv').html(data)
    }
  });
  setTimeout(executeQuery, 500);
}

$(document).ready(function() {
  setTimeout(executeQuery, 500);
});

对于谁面临同样的问题,我通过替换

解决了这个问题
$('#mydiv').html(data)

$('#mydiv').load('/mycontroller/index #mydiv')

2 个答案:

答案 0 :(得分:0)

在动作中将布局设置为false,然后传递相关内容,而不是整个页面

def action1
   <your code here>
end
def action2
   <your code here>
   render :layout => false
end

您对action2的观点应该包含仅与#mydiv相关的内容。

更好的解决方案是使用单个操作并根据请求类型更改渲染选项。 (Ajax或非ajax)

答案 1 :(得分:0)

使用setInterval()而不是setTimeout()

参考: https://www.w3schools.com/jsref/met_win_setinterval.asp

function executeQuery() {
  $.ajax({
    type: 'GET',
    url: 'example.com/url/', // Provide your response URL here.
    success: function(data) {
      $('#mydiv').html(data);
    }
  });
}

setInterval(executeQuery(), (n * 1000)); // Replace 'n' with how many seconds you want.

此代码将每隔'n'秒运行一次executeQuery()方法。这样就可以满足您的要求。