JQuery Asual Address - кнопка Back PopState - PullRequest
Новая
       33

JQuery Asual Address - кнопка Back PopState

0 голосов
/ 08 марта 2012

Я пытаюсь использовать плагин 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-адрес изменяется на предыдущий 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>

Ответы [ 2 ]

1 голос
/ 03 мая 2013

Моя задача состояла в том, чтобы позволить пользователю вернуться назад на несколько страниц и предотвратить возврат без сообщения о том, что он потеряет данные с других страниц. Я закончил реализован таким образом: 

$(".-step-1-").click(function () {
   $.address.value("");
});

$(".-step-2-").click(function () {
    $.address.value("finances");
});

$(".-step-3-").click(function () {
    $.address.value("cofirmation");
});

global.previousPage = null;
$.address.init(function () {
}).change(function () {
}).externalChange(function (event) {
    if (global.previousPage == null) {
        $.address.value("");
    } else {
        showPageExternal(event.pathNames);
    }
}).internalChange(function (event) {
    global.previousPage = event.pathNames;
    showPage(event.pathNames);
});

var showPageExternal = function (pathName) {
    if (global.previousPage == null ||
        ("").localeCompare(global.previousPage) === 0 ||
        ("finances").localeCompare(global.previousPage) === 0) {
        showPage(pathName);
    }
    else {
        //This mean is coming from "confirmation" page
        global.blockUI($("#browserBackMessage"));
    }
};

var showPage = function (pathName) {
    if (("").localeCompare(pathName) === 0) {
        $(".step").hide();
        $(".-step-1").show();
    }
    if (("finances").localeCompare(pathName) === 0) {
        $(".step").hide();
        $("#finances").show();
    }
    if (("confirmation").localeCompare(pathName) === 0) {
        $(".step").hide();
        $("#confirm").show();
    }
};

global = function globalVariable() {
    return (function () { return this; })();
};
0 голосов
/ 08 марта 2012

Это то, что я использовал на http://www.isaac.nl/en/

У меня есть этот HTML-код: 

<div id="main-menu">    
  <a class="history" href="#home">Home</a>
  <a class="history" href="#who">who</a>
  <a class="history" href="#what"></a>
  <a class="history" href="#where"></a>  
</div>

В js-файле я делаю это: 

$.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
  $('.history').address();

}).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(): 'home';

  //.. do the stuff here that you need to do when hash has a certain value
});
...