Question

我有一个div，我希望在不重新加载整个页面的情况下刷新其内容。

我尝试过多次使用多种方法（ajax调用，javascript等等），但我没有做过。

我的div显示ModelName.all的全部内容在这个特殊的div中，我们可以添加我使用的模型的新实体（感谢表单）。

由于Rails部分视图，我显示了这个div。

目前，我在用户提交表单时使用它：

$('#ArticlesDiv').html("<%= escape_javascript (render partial: 'articles') %>");

但似乎我的部分观点并不具备最新模型。因为在我添加新实体之前，我看到了例如5个元素，在我添加新实体之后，我又看到了5个元素。出于测试目的，我使用显示alert

的javascript ModelName.all.count

警报显示5！但是当我查看我的数据库内容（警报之前）时，我可以看到6个元素！当我手动刷新页面时，div会显示6个元素。

代码解释：

主要观点：

<div id="ArticlesDiv">
  <%= render(:partial => "articles") %>
</div>

_articles（局部视图）：

<script>
  alert('<%=Article.all.count%>');
</script>

<% Article.all.each do |article|) %>

<strong><%= article.name %></strong><br />

<% end %>

我的目标是拥有一个流畅的界面，只要您添加其他文章，它就不会重新加载整个页面。

Answer 1

您可以将div的内容部分包含在内，并使用网址/divcontents加载内容。您可以使用.load()

刷新<div>

$('#ArticlesDiv').load("/divcontents");

Answer 2

尝试使用加载函数jQuery，你应该这样做：

HTML：

<div id="div1"></div>
<button type="button" id="button">Test</button>

jQuery的：

$(document).ready(function(){
    $("#button").click(function(){
        $("#div1").load("demo_test.txt");
    });
});

Answer 3

<script>
$(document).ready(function () {
    // will call refreshPartial every 5 seconds
    setInterval(refreshPartial, 5000)

});

// calls action refreshing the partial
function refreshPartial() {
  $.ajax({
    url: "page_url",
    dataType: 'script',
    format: 'js'
 })
}
</script>

如何在不重新加载整个页面的情况下刷新div？

3 个答案: