verspringen lang formulier

[PdeBie]

Hoi allen,

Wij hebben in onze webapplicatie een ontzettend lang formulier met zeker 40 velden onder elkaar.
Sommige van de acties op dit formulier veroorzaken een postback en halen bijvoorbeeld wat data op (dit gebeurt nog niet overal met ajax en gaan we in deze versie van het formulier ook niet meer aanpassen).

Wat er nu echter gebeurt is dat de diverse browsers (IE, FireFox en Chrome) anders verspringen qua positie na de postback.

Bij Chrome en IE komt bijvoorbeeld het veld waar op dat moment de focus ligt helemaal onderaan in beeld, maar in FireFox komt deze weer halverwege te staan. Dit verspringen is voor de gebruiker ontzettend irritant. Wij willen dat het formulier gewoon zijn positie onthoud van VOOR de postback. Dus geen verspringingen meer.

Ik heb dit getracht op te lossen met onderstaande code. De parameter scrollToTop wordt op true gezet zodra ik wil dat de gebruiker helemaal bovenaan begint (hier staat een validatie overzicht).

JavaScript:

    function SetScrollEvent(scrollToTop) {
        window.onload = function() {
            if (scrollToTop)
                window.scrollTo(0, 0);
            else
                window.scrollTo(0, document.body.scrollHeight);
        };
    }

Naar top scrollen werkt prima, maar de andere optie window.scrollTo(0, document.body.scrollHeight); helaas niet. Iemand een idee?

* Formulier inkorten of verdelen over meerdere pagina's etc. is geen optie.

[R4gnax]

pdebie schreef op vrijdag 18 april 2014 @ 15:02:
Iemand een idee?

Niet trachten te kloten met het standaard browser gedrag waar het merendeel van de gebruikers van die specifieke browser bekend mee zijn? Het web is nou eenmaal geen monocultuur.

[Avalaxy]

Postback is gewoon een compleet verkeerde methode hiervoor. Zoiets los je met AJAX op.

[PdeBie]

Avalaxy schreef op vrijdag 18 april 2014 @ 15:22:
Postback is gewoon een compleet verkeerde methode hiervoor. Zoiets los je met AJAX op.

Ja, maar helaas is dat niet overal mogelijk in dit formulier.

We zijn al bezig met plannen voor een versie 2 van dit formulier (waar wel alles netjes asynchroon gaat zoals het hoort), maar dat gaan we dus in deze variant niet oplossen.

R4gnax schreef op vrijdag 18 april 2014 @ 15:20:
[...]


Niet trachten te kloten met het standaard browser gedrag waar het merendeel van de gebruikers van die specifieke browser bekend mee zijn? Het web is nou eenmaal geen monocultuur.

Maar ook zonder deze code verspringt de pagina naar random posities na een postback. Dat is echt heel verwarrend voor de gebruiker.

[Xatom]

Kan je niet zoiets als dit gebruiken (even geüpload naar JSFiddle om wat ruimte te besparen)?

[PdeBie]

Ik zal eens kijken of dat mogelijk is en het gewenste resultaat oplevert.

Vrees dat ik de helpdesk teleur moet stellen en dat ze dit soort telefoontjes maar moeten afdoen met de melding dat het in versie 2 is opgelost. Maar eens kijken wat dit doet.

[BikkelZ]

Ik neem aan dat het element wat de postback veroorzaakt altijd bekend is. Dan kun je er servermatig of via JS dynamisch eerst via JS een #-tag aan je URL toevoegen waar de browser altijd heen springt na de reload. Je kunt daar ook nog viezere dingen mee doen door die #-tag stiekem met offset parameters te vullen en die dan uit te lezen na een postback.

Je kunt ook kijken of je een UpdatePane kunt toepassen. Dan doe je een dynamische postback via AJAX die alleen alles binnen de panel ververst. Maar ik neem aan dat je dat wel kent en geprobeerd hebt

MSDN: UpdatePanel Class (System.Web.UI)

[ Voor 35% gewijzigd door BikkelZ op 21-04-2014 21:11 ]

[PdeBie]

updatepanel is bekend ja. Daar zit het formulier ook in. Helaas mag dat niets baten.

Ik ga het erbij laten. Zonder grondige herstructurering van het formulier gaan we dit niet oplossen. Wordt een versie 2 verhaal.

[Janoz]

Bij een dergelijk groot formulier zou ik trouwens eerder opteren om een soort wizard te implementeren. Niet alleen maakt dat het technisch een stuk makkelijker, maar over het algemeen zorgt het ook voor een betere gebruikerservaring.

[PdeBie]

Dat heeft ook mijn voorkeur, maar helaas is het een eis vanuit de gebruikersgroep dat het hele formulier op 1 pagina onder elkaar staat, zodat ze heel makkelijk alles kunnen bekijken door alleen maar even te scrollen.

Ze willen zo min mogelijk klikken om een formulier in te vullen.

[MoietyMe]

pdebie schreef op dinsdag 22 april 2014 @ 12:07:
Ze willen zo min mogelijk klikken om een formulier in te vullen.

Dan zet je de velden in een carrousel met een timer op 2 seconden

[ Voor 5% gewijzigd door MoietyMe op 22-04-2014 12:12 ]

[Janoz]

pdebie schreef op dinsdag 22 april 2014 @ 12:07:
Dat heeft ook mijn voorkeur, maar helaas is het een eis vanuit de gebruikersgroep dat het hele formulier op 1 pagina onder elkaar staat, zodat ze heel makkelijk alles kunnen bekijken door alleen maar even te scrollen.

Ze willen zo min mogelijk klikken om een formulier in te vullen.

Vandaar ook de "over het algemeen". Data entry medewerkers hebben bijvoorbeeld hele andere eisen als casual users.

[PdeBie]

Inderdaad. Ben het ook helemaal met je eens

Ik heb het hier voorgelegd en we laten het hierbij. Kunnen er nog wel heel veel uitzoek tijd in steken, maar die kunnen we beter in versie 2 steken (die er toch wel komt).