history - Jquery Asual Address - Back Button PopState -
i trying use asual address plug in button works on ajax calls. confused on how work , every tutorial find says impliment different. haven't been able of them work.
i have simple ajax page. calls in image:
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> my html looks this:
<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> using code above, when click link makes ajax call, loads pics , changes url. working fine. problem button. when click button url changes previous url content on page stays same. think has "popstate" , adding js. don't know how it.
can please explain me how popstate works , how add above code button works. thank you.
full page
<!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) { // elements "history" class "addressed". when clicked // href used new #part of 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 url part changes called. // example here determine # part of url , default 'home' var hash = event.path.substring(1); hash = hash? hash.tolowercase(): 'push1'; //.. stuff here need when hash has value }); </script> </head> <body> <a href="push1" >image 1</a> <a href="push2" >image 2</a> <div id="right_content"></div> </body> </html>
my task allow user go in forth pages, , prevent go without message lose data, other pages. ended implemented way:
$(".-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 coming "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; })(); };
Comments
Post a Comment