Autor Zpráva
nowis
Profil
Zdravím,

problém je asi zřejmý z nadpisu. V tuto chvíli mám dlouhou stránku, která je velkým formulářem, s několika tlačítky. Každé tlačítko ovlivní obsah určitého přiřazeného textboxu. Potřebuji, aby se stránka nevracela na začátek po odeslání hodnot, ale aby zůstala na přesně stejném místě.

Asi je nutné to udělat přes javascript (window.scrollTo(x, y);), nebo existuje jiný způsob? Kotvy bohužel nepříchazejí v úvahu, protože by formulář musel odskakovat na předem definovaní místo a ne podle toho, jak má uživatel zrovna odrolováno. Případně by se asi daly použít nějaké dynamické kotvy, ale to je asi zbytečně komplikované.

Takže mně napadly 2 řešení.

řešení 1. Udělám si skrytá pole X, Y, kam budu dávat vždy aktuální pozici a hodnoty pak po načtení stránky použiju pro odskrolování. Což mi příjde jako "divné" řešení a nemám rád skrytá pole, ale zase vím jak bych po načtení s hodnotami pracoval.

řešení 2. Na událost onclick bych si uložil aktuální souřadnice, následně by se odeslala data formuláře a při novém vykreslení formuláře bych hodnoty použil. To mi přijde jako elegantnější způsob, problém je, že nevím, jak bych si předával data mezi dvěmi javascripty, takže by se to asi nějak muselo udělat v rámci jednoho js. A to nevím jak.

Pomůžete mi prosím, nebo napadá vás nějaký lepší způsob?

Díky
Keeehi
Profil
To druhé řešení se mi líbí rozhodně víc.
- vázal bych to na onsubmit formuláře a ne na onclick odesílácího tlačítka
- v prohlížeči existuje spousta míst, kam si můžeš uložit javascriptem nějakou hodnotu. Nejznámější jsou určitě cookies. Dále existuje www.w3schools.com/html/html5_webstorage.asp ale i spoustu dalších a existují i velmi nestandardní způsoby jako třeba obrázek v keši. Pro další způsoby se kouknu na projekt samy.pl/evercookie který se snaží ukládat informace do prohlížeče všemi možnými standardními i nestandardními technikami.
Chamurappi
Profil
Reaguji na nowise:
Neznám konkrétní situaci, ale zamyslel bych se nad tím, jestli je nutné stránku skutečně přenačíst. Jakýkoliv formulář jde odeslat do skrytého rámu a stránka načtená do skrytého rámu může (je-li na stejné doméně) obsahovat skript, který upraví formulář ve svém rodiči. Tedy může měnit parent.document.jménoFormuláře.jménoPolíčka.value nebo i cokoliv jiného.


Reaguji na Keeehiho:
existují i velmi nestandardní způsoby jako třeba obrázek v keši
Zmiňovat toto v kontextu uživatelsky přívětivého narolování mi přijde trochu zvláštní. Nedovedu si představit, že by chtěl mít pozici okna opravdu neprůstřelně zapamatovanou i u lidí, kteří aktivně bojují proti obdobám cookies :-)
nowis
Profil
Děkuji za názory.

Cookies se mi moc nelíbí, příjde mi to trochu jako kanón na vrabce. Raději bych, kdyby se to vše odehrálo "v okně". Ty skryté rámy - tomu moc nerozumím, ale myslím že to je pro mně asi nepoužitelné. Rád bych, aby to docela dobře fungovalo i bez JS, takže bych jako primární řešení viděl jako klasické odeslání html formuláře, a to zapamatování polohy by měl být jen bonus, pokud má uživatel zapnutý JS... (ikdyž to mají dnes asi stejně všichni...). Prostě nechci, aby to bes JS ztratilo funkčnost.

K těm nestandardním technikám - raději bych to řešil standardně :-)

Abych ještě dovysvětlil jak to funguje - to načtení stránky způsobí zápis do databáze, a na základě tohoto zápiu se v textarea načte nový text.

Čím víc o tom přemýšlím, vypadá to, že se nevyhnu řešení č.1...
Chamurappi
Profil
Reaguji na nowise:
Rád bych, aby to docela dobře fungovalo i bez JS, takže bych jako primární řešení viděl jako klasické odeslání html formuláře
JavaScript by změnil target, vypsal přes document.write neviditelný <iframe> a změnil nějakou hidden položku formuláře (nebo rovnou jeho action). Kdo by neměl JS, tomu by se formulář odeslal klasicky, neměl by změněnu hidden položku, takže bys mu poslal všechno. Kdo by měl JS, tomu by se formulář poslal do rámu a tam bys vygeneroval jen <script> s pokyny, co se má změnit v parentu. Není nemožná udělat to neprůstřelně.

Nicméně tebou popsané řešení č. 2 (při použití localStorage) je snazší a skoro určitě bych ho na tvém místě upřednostnil před prvním řešením. Převedeno do HTML to je jeden atribut onsubmit="localStorage.setItem('pozice', window.pageYOffset || document.documentElement.scrollTop)" a jeden <script> s kódem window.scrollTo(0, localStorage.getItem('pozice')).
_es
Profil
nowis:
Rád bych, aby to docela dobře fungovalo i bez JS
To by si to mohol rozdeliť na viac formulárov a ten "priradený textbox" by bol v iframe, ktorý by bol nasmerovaný ako target formulára. Iframe by nemusel byť skrytý. Potom by to mohlo fungovať aj bez JS.
nowis
Profil
OK, děkuji. Ten localStorage jsem neznal, ale když na něj koukám, vypadá to, že je to asi to, co potřebuju. Akorát by asi bylo pro tento účel vhodnější použít localStorage, je to tak? Abych se vyhnul tomu, že příště otevřu prohlížeč a rovnou mi to skočí někam, kam nechci... Ikdyž stejně bych měl po každém načtení ...Storage vymazat. Děkuji Chamurappi za kód.
nowis
Profil
Teď to po sobě čtu. Mělo to být:
"...Akorát by asi bylo pro tento účel vhodnější použít localStorage..."
Chamurappi
Profil
Reaguji na nowise:
Teď to po sobě čtu. Mělo to být
Ať to čtu jak to čtu, věta v #8 se shoduje s větou v #7 :-)
Možná jsi chtěl napsat sessionStorage.

Ikdyž stejně bych měl po každém načtení ...Storage vymazat
Ano, ihned po skočení zapamatovanou pozici smaž, localStorage.removeItem('pozice').
nowis
Profil
Chamurappi:
Možná jsi chtěl napsat sessionStorage.

:-))))) ...ano, správně, děkuji za pochopení... Už jsem byl včera hodně unaven a ťukal jsem to z telefonu, ale teď už se neodvažuji napsat to potřetí, protože bych to určitě zase napsal špatně, takže raději jen ta citace.

A děkuji za další kousek kódu, seš borec Chamurappi

BTW- teď jsem si všiml možnosti "upravit", ale tu jsem tam včera v telefonu ani po přihlášení neměl :-(
Keeehi
Profil
Možnost upravit se zobrazuje jen když je editace možná. Editaci mohou znemožnit různé faktory: od napsání příspěvku uplynulo více jak 24 hodin, moderátor upravil příspěvek, a možná i něco dalšího.
nowis
Profil
Tak jsem narazil na jednu záhadu. Pokud použiju u buttonu onsubmit, tak to nefunguje - prostě se do localStorage nic neuloží. Pokud to pověsím třeba na onClick, tak to jede OK. Čím to?
Chamurappi
Profil
Reaguji na nowise:
Keeehi ti hned v druhém příspěvku radil použít onsubmit na formuláři (tedy na elementu <form>). Jestli se mají různá tlačítka chovat různě, použij onclick na tlačítku.
nowis
Profil
Chamurappi:
aha, já dával onsubmit na tlačítku...
Keeehi
Profil
nowis:
Ještě při onclicku pozor na to, že pokud se formulář odešle pomocí entru třeba z textového políčka, onclick se vyvolá jen na prvním inputu s typem submit. A pokud se formulář odešle javascriptem, pak se onclick nevyvolá ani jednou. onsubmit se volá vždy a právě jednou.
_es
Profil
Keeehi:
onsubmit se volá vždy a právě jednou.
Ak sa formulár odošle v JS pomocou metódy submit, tak sa udalosť onsubmit nevyvolá.
Keeehi
Profil
_es:
Jo, na to jsem úplně zapomněl.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0