Этот код 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 в переменную и передать его как объект JSON для первого аргумента в pushState(), но я считаю, что мог делать это неправильно. Каков наилучший способ реализовать это? Кроме того, функция window.onpopstate не запускается при обновлении страницы вручную, поэтому я не уверен, как мне получить доступ к объекту и получить данные в любом случае.
Я не уверен, насколько это актуально... но я запускаю это приложение в Синатре.
Мой макет.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 с идентификатором контента и другой HTML-разметкой внутри них. Кроме того, когда вызов ajax работает, он, кажется, добавляет второй div с идентификатором контента после успеха ajax. Как мне предотвратить это?
TL;DR
Как сохранить состояние страницы с ручным обновлением вместо загрузки в реальном представлении и потери форматирования/стиля.