我有一个div
,我想刷新其内容,而无需重新加载整个页面。
我尝试了很多次使用很多方法(ajax调用,javascript等等),但我没有做过。
我的div显示了ModelName.all
的全部内容。在这个特殊的div中,我们可以添加我使用的模型的新实体(感谢表单)。
由于Rails部分视图,我显示这个div。
目前,我在用户提交表单时使用此方法:
$('#ArticlesDiv').html("<%= escape_javascript (render partial: 'articles') %>");
但似乎我的部分观点没有最新的模型。因为在我添加新实体之前,我看到了例如5个元素,在我添加新实体之后,我又看到了5个元素。出于测试目的,我使用javascript alert
显示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 %>
我的目标是拥有一个流畅的界面,无论何时添加其他文章,它都不会重新加载整个页面。
您可以将div
的内容部分包含在内,并使用URL /divcontents
加载内容。你可以使用<div>
刷新.load()
:
$('#ArticlesDiv').load("/divcontents");
尝试使用加载函数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");
});
});
<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>