AJAX en de browser back(vorige) button
In de header worden dan de gegevens van het winkelwagentje geupdate (x artikelen voor x,xx euro).
Als nu vanuit de pagina op de vorige knop in de browser geklikt wordt, dan komen de gegevens van het winkelwagentje terug in de 'oude' staat te staan.
Ik kan dit eventueel met een cookie oplossen, maar ik vraag me af of er een andere (handigere) manier is.
Wordt er in dat systeem iets veranderd aan de url, rechts van de # ? Anders zou ik dat niet verwachten.
Gebeurt dit trouwens in alle browsers?
Gewijzigd op 04/06/2013 10:35:48 door Kris Peeters
Het gebeurt in IE 10 en Safari, voor de rest heb ik nog niet getest
Zie toch eens met Chrome en FF.
Voor zover ik weet, zorgt een Ajax post niet voor een extra toestand van de back knop.
Uiteraard kunnen browers (die ik niet gebruik) dit wel inbouwen, maar geen idee waarom iemand dat een goed idee zou vinden.
Ik heb het zelf niet uitgebreid getest, maar daarnaast schijnt een GET bij Ajax tot minder complicaties te leiden dan een POST.
Derde oplossing is alle caching- en expiratieheaders in de Ajax-respons goed zetten, bijvoorbeeld met:
Als je daarna F5 doet? Heb je dan weer de nieuwe waardes ?
(ajax heeft er, denk ik, niets mee te maken)
Alle content die dynamisch aangepast is, komt te vervallen en wordt teruggezet in de originele staat (dus inderdaad uit de browser cache), als de back of next geklikt wordt.
Dit schijnt bij alle browsers zo te zijn, en is naar mijn (bescheiden) mening een pure inconsequentie:
wel ajax en js ondersteunen maar dan zulke rare fratsen uithalen.
Het vreemde is dat wel bijgehouden wordt wat je in een formulier hebt ingevuld (terwijl dat nou juist niet zo moeten) en de scroll positie van de pagina.
De back-knop stuurt je naar de vorige url. Bij een Ajax post verandert de url niet; wordt er dus geen extra toestand toegevoegd aan de de history.
Dus, als je op de back knop drukt, kom je op een andere pagina, en is alles van javascript weg.
-----
Laat me even verduidelijken wat ik bedoelde met die #, mijn eerste post.
Hier een voorbeeld
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
</head>
<body>
<ul id="navBar">
<li><a href="#index">Home</a></li>
<li><a href="#about">About us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.js"></script>
<script>
function loadPage(page) {
var file = 'content/' + page + '.php';
$('#content').load(file);
}
function hashChanged() {
var hash = location.hash;
if (hash != '') {
loadPage(hash.substr(1));
}
else {
loadPage('index');
}
}
$(document).ready(function() {
// initial
hashChanged();
$(window).hashchange(function() {
hashChanged();
});
});
</script>
</body>
</html>
<head>
</head>
<body>
<ul id="navBar">
<li><a href="#index">Home</a></li>
<li><a href="#about">About us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.js"></script>
<script>
function loadPage(page) {
var file = 'content/' + page + '.php';
$('#content').load(file);
}
function hashChanged() {
var hash = location.hash;
if (hash != '') {
loadPage(hash.substr(1));
}
else {
loadPage('index');
}
}
$(document).ready(function() {
// initial
hashChanged();
$(window).hashchange(function() {
hashChanged();
});
});
</script>
</body>
</html>
Hier heb ik dus een systeem ineen gestoken waarbij alles gepaard gaat met een verandering van de url.
Zo kan je de toestand bijhouden; kan je de url bookmarken, doorsturen via mail/chat/...
Hier kan je dus ook de back knop gebruiken.
Kan je hier iets van inspiratie in vinden?
Neemt niet weg dat ik jouw inspanning niet waardeer ;-)
Edit:
Euh .... een dubbele ontkenning is een bevestiging, ik wilde dus zeggen dat ik je inspanning wel waardeer.
Euh .... een dubbele ontkenning is een bevestiging, ik wilde dus zeggen dat ik je inspanning wel waardeer.
Gewijzigd op 05/06/2013 15:25:13 door Ger van Steenderen