Sessions + form: complete pagina herladen bij back button

[bartbh]

Op dit moment werk ik aan een webapplicatie, waarbij een formulier ingevuld kan worden en daarna wordt doorgegeven naar de volgende pagina.
Echter als ik op de backknop druk wordt de initiële (lege) pagina geladen, ipv het ingevulde formulier

Ik zal even in woorden proberen uit leggen wat ik probeer te bereiken. De applicatie bestaat in totaal uit 4 stappen en een gebruiker kan ten alle tijden terug naar een bepaalde stap om daar aanpassingen te maken.

Stap 1
Formulier weergeven
Indien bepaalde waardes al eerder zijn weergeven, dan worden deze uit $_SESSION gehaald en weergegeven.
Tussentijds wordt bij het bewerken van het formulier ook om de 5 seconden de waardes van het formulier via een ajax call naar $_SESSION opgeslagen

Stap 2
Formulier werken en de waardes van het formulier opslaan in $_SESSION
Dus op dit moment staan alle waardes van het formulier in $_SESSION


Als ik in stap 2, op de link van stap 1 klik, dan gaat het goed en komen de ingevulde waardes netjes in het formulier te staan. Echter als ik in stap 2 de back button gebruik, dan wordt de lege pagina van stap 1 weergegeven en niet de ingevulde waardes. (Chrome in ieder geval, IE onthoudt de invulde formwaardes via eigen cache?)


Wat ik dus eigenlijk bereiken wil, is dat als de backbutton wordt gebruikt in stap 2, dat de complete pagina van stap 1 herladen wordt en dus niet de versie zoals de browser deze nog in de cache heeft zitten.

Nu heb ik daarvoor onderstaande headers gezet, maar dat biedt geen oplossing.

code:

Last-Modified:  Tue, 29 Nov 2011 12:15:08 GMT
Expires:    Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control:  no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache

Hoe kan ik de browser forceren om een volledige reload te doen bij het gebruik van de backbutton, in plaats van de pagina te gebruiken zoals deze nog in de cache staat. Dus eigenlijk moet het gebruik van de back button gelijk staan het opnieuw laden van stap 1. Het setten van de headers biedt geen soelaas, ook het gebruik van de <meta> tags niet.

[ZeroXT]

Ik kan me zo geen oplossing bedenken voor je huidige situatie. Wat ik wel kan bedenken is dat het misschien een idee is om gebruik te maken van de hashtag en javascript.

Wanneer je bij een meerdere stappenformulier de stappen in de hashtag zet en javascript de huidige content laat laden kan je gebruik maken van de back en forward button van de browser.

Wanneer men bij stap 1 is zal er in de url te zien zijn: http://website.nl/formulier#stap1. Klikt men in stap 1 op opslaan of volgende knop zal de url wijzigen door middel van javascript naar http://website.nl/formulier#stap2.

Laat een interval lopen die controleert of de hash in een url veranderd wordt, zo ja, geef de juiste content/formulier.

Zo houdt je in principe alles op een enkel pagina en wanneer je de vorige of volgende knop indrukt zullen alle gegevens geladen worden door middel van ajax (wanneer het grote formulieren zijn) of door middel van het wijzigen van de display css property van de desbetreffende stap.

[NMe]

Het hele idee achter de backbutton is juist dat hij je terug brengt naar de vorige pagina die je bekeek in de staat zoals je hem het laatst gezien hebt. Om die reden is er ook geen DOM ready-event of iets dergelijks op het moment dat je op de backbutton klikt.

Ik snap eigenlijk ook niet zo goed waarom je algemeen geaccepteerd standaardgedrag wil overriden. Dat gaat je gebruikers toch verwarren?

[ZeroXT]

Het zelfde gebeurt hier op tweakers.net in de pricewatch. Daar wordt ook een hashtag aangemaakt op moment dat je gaat filteren op bepaalde eigenschappen van producten. Op moment dat je dan op de vorige knop klikt neemt javascript het over.

Ik zie niet echt hoe mij dat kan verwarren NMe?

[bartbh]

Als ik de backbutton gebruik, dan zou ik toch juist verwachten dat ik het formulier weer te zien krijg zoals ik dat ingevuld heb voordat ik op versturen heb gedrukt. Dus met checkboxen, selects en textvelden met waardes zoals ik deze heb ingevoerd. Ik wil ook niet de functie van de backbutton overschrijven.

Het gaat hier echter niet om een complete ajax applicatie, want de stappen an sich zijn wel gewoon losse pagina's.

Dus:

stap1.php
Formulier tonen met diverse checkboxen, select etc. De textvelden worden pas weergegeven als er een optie geselecteerd is uit de select.

Als stap 1 als eens eerder ingevuld is, dan worden de waardes alvast ingevuld vanuit $_SESSION. Als er al een optie geselecteerd is, dan wordt het bijbehorende textveld al wel weergegeven.

tussentijds worden de waardes ook alvast weggeschreven, zodat de waardes niet verloren gaan als iemand naar een andere stap gaat.


stap2.php
Hier worden de waardes nogmaals naar de $_SESSION geschreven en de opties voor stap 2 worden weergegeven.

Op het moment dat op deze pagina de backbutton wordt gebruik, gaat de gebruiker dus terug naar stap1.php.


In Internet Explorer gaat het dan in ieder geval goed en wordt het formulier in stap1.php correct weergegeven, dus de verborgen textvelden worden weergegeven en de waardes staan er correct in. Dus exact zoals als de gebruik hem voor het laatst heeft gezien, voordat hij op “versturen” klikte.

In Chrome (of waarschijnlijker, webkit, aangezien het ook in de Android browser gebeurt) gaat het fout en wordt het lege formulier getoond, of, nog vreemder, slechts sommige velden en sommige waardes.


Omdat bij een hard-link naar stap1.php het formulier wel goed, zou ik dus eigenlijk willen bereiken dat de complete pagina opnieuw geladen wordt en niet de gecachte versie zoals deze nog in de history zit.


Om met een complete ajax versie te gaan werken (dus #stap1, #stap2 etc.) zie ik niet direct zitten, aangezien ik dat redelijk wat herschrijfwerk in houdt en ik er eigenlijk nog niet heel veel ervaring mee heb.

Hoop dat m’n punt zo iets duidelijker is, en hopelijk heeft iemand een oplossing voor dit probleem. Kan ook goed zijn dat ik iets over het hoofd zie, of dit op een andere manier moet gaan benaderen.


Wat ik tot nu toe op Google heb kunnen vinden, lijkt het een probleem te zijn van Chrome/webkit + sessions + postdata. Alleen een goede oplossing ik nog niet kunnen vinden, vandaar dat ik graag een complete refresh zou willen doen.

[ZeroXT]

Ik blijf toch weer terug vallen op javascript:

code:

window.onbeforeunload = function()
{
    window.location = 'http://website.nl/stap1.php';
    return false;
}

Punt alleen is dat je dan een probleem hebt met de forward button. Drukt de gebruiker nu op forward of op backward dus waar moet die heen.. En in FireFox levert dit een melding op of je op de pagina wilt blijven of wilt verlaten.

Ik denk dat de beste optie toch het idee is wat ik eerder heb beschreven.

[bartbh]

Vanuit mezelf denkend, zou een gebruiker eerder geneigd zijn de backbutton te gebruiken om terug te gaan. Dan stap 1 weer in- of aanvullen en dan de daarvoor bestemde button "Volgende vraag" gebruiken om bij stap 2 uit te komen. Dus het forward-probleem is dan niet zo'n ramp.

Dus nu kan ik 3 dingen doen:

1. inderdaad onbeforeunload gebruiken, maar dan ga je misschien ook andere problemen krijgen?
2. een extra knop aanmaken in de UI om het intuïtief gebruik van de backbutton van de browser te ontmoedigen, maar het probleem an sich dus niet oplossen
3. in stap 2 via JS een cookiewaarde setten, als er dan terug wordt gegaan naar stap 1, dan de browser redirecten en de waarde weer unsetten.

Alleen van de laatste optie weet ik niet of dat goed gaat, als de gecachte versie van de pagina wordt gebruikt.

Ik zal eens even gaan stoeien

[ZeroXT]

Html5 biedt tevens ook nog een oplossing met een local database/storage:
http://dev.w3.org/html5/webstorage/

Werkt dus alleen in de moderne browsers.

[bartbh]

Het moet ook compatible met de oudere browsers zoals IE7 etc.

Voorlopig heb ik het "opgelost" door in stap 2 een JS cookie te setten. Gaat de gebruiker dan met de back button terug naar stap 1, dan wordt de cookie waarde verwijderd en de gebruiker doorgestuurd naar stap 1.