Я пытаюсь использовать подключаемый модуль Asual Address, чтобы моя кнопка "Назад" работала при вызовах ajax. Я так запутался в том, как это работает, и в каждом учебнике, который я нахожу, говорится, что это нужно делать по-другому. Я не смог заставить ни одного из них работать.
У меня есть простая страница ajax. Он просто вызывает изображение:
Javascript:
<script type="text/javascript">
$("a").live("click", function(event) {
url = $(this).attr("href");
$.address.value($(this).attr('href'));
event.preventDefault();
$.ajax({
type: "get",
url: "/"+url+".php",
data: "",
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
},
})
});
</script>
Мой HTML выглядит так:
<body>
<a href="push1" onclick="return false;" >Image 1</a>
<a href="push2" onclick="return false;">Image 2</a>
<div id="Right_Content"></div>
</body>
Используя приведенный выше код, когда я нажимаю на ссылку, он выполняет вызов ajax, загружает фотографии и меняет URL-адрес. Это работает нормально. У меня проблема с кнопкой назад. Когда я нажимаю кнопку «Назад», URL-адрес меняется на предыдущий, но содержимое страницы остается прежним. Я думаю, что это как-то связано с «popstate» и добавлением этого в мой js. Я просто не знаю, как это сделать.
Может кто-нибудь объяснить мне, как работает popstate и как я могу добавить его в мой код выше, чтобы моя кнопка «Назад» работала. Спасибо.
ПОЛНАЯ СТРАНИЦА
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/JS_Functions/jquery-ui-1.8.17.custom/js/jquery-1.7.1.min.js"></script>
<script src="/JS_Functions/jquery-ui-1.8.17.custom/js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="JS_Functions/jquery.address-1.4/jquery.address-1.4.min.js"></script>
<script type="text/javascript">
$.address.init(function(event) {
// All elements with the "history" class will be "addressed". When they get clicked
// the href will get used as the new #part of the URL
$('a').address();
$('a').live("click", function(){
var href = $(this).attr( "href" );
$.ajax({
type: "get",
url: "/"+href+".php",
data: "",
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
},
})
})
}).change(function(event) {
//Every time the url part changes this will be called.
// As an example here I determine the # part of the URL and default to 'home'
var hash = event.path.substring(1);
hash = hash? hash.toLowerCase(): 'push1';
//.. do the stuff here that you need to do when hash has a certain value
});
</script>
</head>
<body>
<a href="push1" >Image 1</a>
<a href="push2" >Image 2</a>
<div id="Right_Content"></div>
</body>
</html>
