维护手动页面刷新时通过AJAX加载的状态/内容
Maintaining state/content loaded in via AJAX on manual page refresh
这个jQuery/History.js代码可以通过单击链接并在浏览器中来回导航来通过Ajax加载内容,但在手动页面刷新时,历史堆栈/日志会丢失,而不是只加载之前加载的相同内容,我得到了实际的.erb文件,并丢失了页面的样式/格式。
$(function(){
$('.nav-bar li a').on('click', function(event){
var urlPath = $(this).attr('href');
// not implemeneted
var title = urlPath.capitalize();
loadContent(urlPath);
// pushes the current page state onto the history stack, and changes the URL
History.pushState('', null, urlPath);
event.preventDefault();
});
// This event makes sure that the back/forward buttons work too
window.onpopstate = function(event){
console.log("pathname: " + location.pathname);
loadContent(location.pathname);
};
});
function loadContent(url){
// Uses jQuery to load the content
$('#content').load(url+'#content', function(){
console.log("Ajax success"); // Ajax
// bxSlider image slider
$('.bxslider').bxSlider({
adaptiveHeight: true,
mode: 'fade',
captions: true
});
});
}
String.prototype.capitalize = function(){
// add capitalize to string - uppercase the first character, add it to the rest of the word
return this.charAt(0).toUpperCase() + this.slice(1);
}
如何在手动页面刷新过程中保持数据/历史记录?我尝试将当前html设置为一个变量,并将其作为pushState()中第一个参数的JSON对象传递,但我认为我可能做错了。实现这一点的最佳方式是什么?此外,window.onpopstate函数不是在手动刷新页面时运行的,所以我不确定如何访问对象并获取数据。
我不确定这有多重要…但我正在Sinatra 中运行这个应用程序
我的布局.erb
<!DOCTYPE html>
<html>
<head>
<title>/title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js"> </script>
<script src="/js/jquery.bxslider.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>
<link href="/css/jquery.bxslider.css" rel="stylesheet" type="text/css" />
<script src="/js/application.js"></script>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
</head>
<body>
<nav class="nav-bar">
<ul>
<li><a href="/" id="nav-bar">Home</a></li>
<li><a href="about" id="nav-bar">About</a></li>
<li><a href="portfolio" id="nav-bar">Portfolio</a></li>
<li><a href="resume" id="nav-bar">Resume</a></li>
</ul>
</nav>
<%= yield %>
</body>
我的.erb视图的其余部分由一个div组成,其中包含内容ID和其他HTML标记。此外,当ajax调用工作时,它似乎会在ajax成功时附加第二个div,该div的ID为content。我该如何防止这种情况发生?
TL;博士
如何通过手动刷新来保持页面状态,而不是在实际视图中加载并丢失格式/样式。
您已经定义了
// This event makes sure that the back/forward buttons work too
window.onpopstate = function(event){
console.log("pathname: " + location.pathname);
loadContent(location.pathname);
};
在jQuery块内:
$(function(){
...
)
这强制它在文档加载后运行,因此直到第一个popstate事件发生后才定义它。
您可以使用localStorage
,它在第一个页面中存储数据,在任何其他页面中,您都可以再次获得数据。
相关文章:
- 如何更改jquerymobile中默认的加载ajax加载程序gif
- 无法在 IE6 和 IE7 上加载 ajax
- 页面刷新后重新加载 ajax 检索到的数据
- 清理在加载 Ajax 内容时添加的 CSS
- jquery选项卡加载Ajax内容
- Grails:多个加载ajax调用,但只有一个打印到控制台
- 如何检测通过JSON数据引用的图像何时加载AJAX
- 加载ajax数据时出现jVectorMap问题
- JQuery在加载ajax时阻止链接工作
- 如何在不重新加载ajax的情况下在datatable上.draw()或添加行
- 替换超链接默认操作以加载 AJAX 请求
- 高图表不使用加载 ajax 的数组进行渲染
- 带有 OnClick 的 jQuery 链接标记 href 需要单击两次才能加载 AJAX
- 悬停两次以加载 ajax
- 获取加载 ajax 的文档信息
- 使用 Jquery 在 AJAX 内部加载 AJAX
- 为什么当页面加载 AJAX 时我的 URL 之间没有空格
- 在当前页面中加载一个新的谷歌地图,加载AJAX
- 当滚动达到 80% 时加载 ajax
- 图像滑块未加载 Ajax 请求