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

【问题标题】：Auto refresh <div> without reload entire page自动刷新 <div> 而不重新加载整个页面
【发布时间】：2013-02-22 18:57:42
【问题描述】：

我正在尝试在不刷新整个索引页面的情况下更新“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')

【问题讨论】：

不应该是window.setTimeout(executeQuery, 500)吗？
@SaurabhJain 我认为是一样的。它刷新但它将所有页面返回到“mydiv”。我只需要刷新“mydata”
您需要创建一个只包含您想要的内容的页面，而不是加载完整的页面。
@Juhana 没有使用 $('#mydiv').html(data)，而是将其替换为 $('#mydiv').load('/mycontroller/index #mydiv')现在它可以工作了！

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

【解决方案1】：

在操作中将布局设置为 false，只传递相关内容，而不是整个页面

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

您的 action2 视图应包含仅与 #mydiv 相关的内容。

更好的解决方案是使用单个操作并根据请求类型更改呈现选项。（Ajax 或非 ajax）

【讨论】：

这个问题在 2 年前就解决了。答案在我的问题中。

【解决方案2】：

使用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() 方法。这样你的要求就完成了。

【讨论】：