PHP + AJAX, nacitani dalsich zaznamu a vraceni zpet tam, kde jsem prestal

12. 1. 2022 12:13:26

Ahoj,

muzete me prosim nakoupnout, jak resit tuto vec?

Mam stranku, na kterou dynamicky AJAXem z API natahuji zaznamy. Vypise se 9 zaznamu a pod tim tlacitko "dalsi". Kliknu na nej a natahne se mi z API dalsich 9 zaznamu. A tak porad dokola... to mi funguje.

Kdykoli kliknu na zaznam, dostanu se do jeho detailu. Pak dam v prohlizeci zpet a jsem samozrejme na zacatku vypisu zaznamu, takze abych mohl pokracovat dal, musim zase xkrat kliknout na dalsi. Zaznamy maji fotku a nevim, zda je dobre vypsat pak treba vsech 45 prispevku najednou misto postupneho strankovani po 9 zaznamech.

Nasel jsem JS kod, co dovede vlozit zaznam do historie prochazeni, takze se mi povedlo udelat, ze vim na jakem limitu strankovani jsem skoncil. Vzdy po kliknuti na "dalsi" mi to do historie napise aktualni polohu strankovani. Nastavil jsem to tedy tak, ze kdyz jdu z detailu zpet, nacte se ta konkretni devitka zaznamu, ktera byla otevrena jako posledni, abych nevypsal 45 zaznamu najednou.

Z toho ale vyplynul dalsi problem. Nekdo si treba 4x klikne na dalsi, takze ma nacteno 45 prispevku. Nejde do detailu, ale vrati se treba na 12. zaznam a jde do detailu. Pak se vrati zpatky, ale neni u toho 12. zaznamu. Je samozrejme na konci toho limitu strankovani, protoze to mi drzi ten JS kod viz vyse.

Asi se to bude resit nejakym prubeznym ukladanim session, nevim... Nebo cache, ale to uz je asi moc slozite...

Jak tohle resite?

12. 1. 2022 12:13:26

https://webtrh.cz/diskuse/php-ajax-nacitani-dalsich-zaznamu-a-vraceni-zpet-tam-kde-jsem-prestal/#reply1496529

Pavel Mareš

(19 hodnocení)

12. 1. 2022 13:19:31

Použij ten js kód a do url si dávej /page/3/ ... Když půjde na detail a zpět tak se vrátí na /page/2/ a ty víš, že máš načíst příspěvky od třetí stránky.

Podle toho pak musíš zohlednit paginaci apod.

12. 1. 2022 13:19:31

https://webtrh.cz/diskuse/php-ajax-nacitani-dalsich-zaznamu-a-vraceni-zpet-tam-kde-jsem-prestal/#reply1496528

franta.hosek

12. 1. 2022 13:26:07

Dekuju za tip, ale ono to taky selhava. Protoze si vem, ze ti uzivatel da 4x nacist dalsi zaznamy, tim padem bys v url mel /page/4. Jenze ten clovek nejde do detailu a odscrolluje si treba na 13. zaznam a ten klikne do detailu. V url ma porad /page/4, jenze teoreticky kliknul na zaznam pri page/2 (strankovani po 9). To znamena, ze se sice vrati zpet, ale k jinemu zaznamu nez kde kliknul na detail.

Na PC se tohle fungovani moc neprojevuje. Ale na telefonu jsi z toho zmatenej, ze jdes na detail zaznamu, das zpet, vrati te to a pak jsi vlastne u zaznamu, kterej byl az u konce stranky, ale ty jsi sel do detailu do zaznamu ze zacatku.

12. 1. 2022 13:26:07

https://webtrh.cz/diskuse/php-ajax-nacitani-dalsich-zaznamu-a-vraceni-zpet-tam-kde-jsem-prestal/#reply1496527

TomasX

(4 hodnocení)

12. 1. 2022 14:00:28

udělej si průzkum jak to má konkurence implementované, např. Alza to takhle nějak používá.

Při odscrollování musíš měnit url na /page/X podle aktuální pozice, tj. podle toho jakou sadu zboží vidí.

Pokud těch položek nemáš opravdu velké kvantum, ale třeba jen stovky, můžeš také mít v url přímo rozsah /page/1-5 a poté se uživateli při návratu zpět načte vše vč. těch předchozích přesně jak to původně měl. Při procházení může být také vhodné měnit kotvu # na aktuální řádek (např. podle první položky na řádku), kde návštěvník je (např. /page/1-5#polozka-id-123213), při znovunačtení stránky návštěvník skončí přesně tam, kde naposledy byl.

Možností je spousta, projdi si ostatní weby, udělej si svůj model fungování, pokus se ho implementovat a pokud ti to nepůjde, můžeš sem napsat, přiložit ukázkový kód, který ti nejde a určitě ti tady pak někdo poradí.

12. 1. 2022 14:00:28

https://webtrh.cz/diskuse/php-ajax-nacitani-dalsich-zaznamu-a-vraceni-zpet-tam-kde-jsem-prestal/#reply1496526

oldchoolwt

13. 1. 2022 12:37:34

Ukladej si info o chování usera do cookies/session a nemusíš řešit URL, pokud stránkuješ čistě skrze ajax. Potom stačí vypsát příspěvky do určitého id a nasměrovat usera na potřebný příspěvek.

S cookie lze pracovat i přes js - https://github.com/js-cookie/js-cookie

---------- Příspěvek doplněn 13.01.2022 v 13:38 ----------

Napsal TomášX;1638288
udělej si průzkum jak to má konkurence implementované, např. Alza to takhle nějak používá.

Při odscrollování musíš měnit url na /page/X podle aktuální pozice, tj. podle toho jakou sadu zboží vidí.

Pokud těch položek nemáš opravdu velké kvantum, ale třeba jen stovky, můžeš také mít v url přímo rozsah /page/1-5 a poté se uživateli při návratu zpět načte vše vč. těch předchozích přesně jak to původně měl. Při procházení může být také vhodné měnit kotvu # na aktuální řádek (např. podle první položky na řádku), kde návštěvník je (např. /page/1-5#polozka-id-123213), při znovunačtení stránky návštěvník skončí přesně tam, kde naposledy byl.

Možností je spousta, projdi si ostatní weby, udělej si svůj model fungování, pokus se ho implementovat a pokud ti to nepůjde, můžeš sem napsat, přiložit ukázkový kód, který ti nejde a určitě ti tady pak někdo poradí.

Nemusíš.

---------- Příspěvek doplněn 13.01.2022 v 13:41 ----------

Celý Tomášův příspěvek je o ničem, klasický webtrh - napíšeš dotaz a začnou se řešit OT.

13. 1. 2022 12:37:34

https://webtrh.cz/diskuse/php-ajax-nacitani-dalsich-zaznamu-a-vraceni-zpet-tam-kde-jsem-prestal/#reply1496525

TomasX

(4 hodnocení)

13. 1. 2022 12:58:19

Napsal oldchoolwt;1638387
Ukladej si info o chování usera do cookies/session a nemusíš řešit URL, pokud stránkuješ čistě skrze ajax. Potom stačí vypsát příspěvky do určitého id a nasměrovat usera na potřebný příspěvek.

S cookie lze pracovat i přes js - https://github.com/js-cookie/js-cookie

Tohle ale nebude dobře fungovat při více otevřených tabech, nelze pak snadno je odlišit od sebe.

13. 1. 2022 12:58:19

https://webtrh.cz/diskuse/php-ajax-nacitani-dalsich-zaznamu-a-vraceni-zpet-tam-kde-jsem-prestal/#reply1496524

oldchoolwt

13. 1. 2022 13:25:35

Napsal TomášX;1638391
Tohle ale nebude dobře fungovat při více otevřených tabech, nelze pak snadno je odlišit od sebe.

SessionStorage - https://stackoverflow.com/questions/11896160/any-way-to-identify-browser-tab-in-javascript

13. 1. 2022 13:25:35

https://webtrh.cz/diskuse/php-ajax-nacitani-dalsich-zaznamu-a-vraceni-zpet-tam-kde-jsem-prestal/#reply1496523

TomasX

(4 hodnocení)

13. 1. 2022 14:29:17

nejprve mluvíš o cookies/session, pak to změníš na sessionStorage, ale ani v tom to není ideální, četl jsi k tomu tu diskuzi? Má to docela dost omezení, v dnešní době se třeba přidává synchronize tabů v podání Applu/Firefoxu mezi prohlížeči, duplikování tabů atd. Zažil jsem spousty pokusů tohle nějak zprovoznit, ale vždy to dopadlo dost problematicky, banky rádi omezují svoje bankovnictví na jeden tab, ale je s tím dost práce.

Reálně pokud takovýhle požadavek client má, řešíme to přes držení proměnné v runtime JS, tím se ale dost rozbíjí persistence pro obnovení tabu. Máš příklad webu, kde to takhle funguje?

13. 1. 2022 14:29:17

https://webtrh.cz/diskuse/php-ajax-nacitani-dalsich-zaznamu-a-vraceni-zpet-tam-kde-jsem-prestal/#reply1496522

oldchoolwt

13. 1. 2022 14:36:25

Napsal TomášX;1638399
nejprve mluvíš o cookies/session, pak to změníš na sessionStorage, ale ani v tom to není ideální, četl jsi k tomu tu diskuzi? Má to docela dost omezení, v dnešní době se třeba přidává synchronize tabů v podání Applu/Firefoxu mezi prohlížeči, duplikování tabů atd. Zažil jsem spousty pokusů tohle nějak zprovoznit, ale vždy to dopadlo dost problematicky, banky rádi omezují svoje bankovnictví na jeden tab, ale je s tím dost práce.

Reálně pokud takovýhle požadavek client má, řešíme to přes držení proměnné v runtime JS, tím se ale dost rozbíjí persistence pro obnovení tabu. Máš příklad webu, kde to takhle funguje?

Dál jsem mu radu, jak udělat to, co chce. Určitě nebude dělat web pro banku, aby řešil taby (okem jsem viděl, jak banky funguji a tipuji, že jsou rády, když jim to funguje).

Rozepisovat se ti nebudu, protože zase se to promaže, aby to nikdo neviděl.

13. 1. 2022 14:36:25

https://webtrh.cz/diskuse/php-ajax-nacitani-dalsich-zaznamu-a-vraceni-zpet-tam-kde-jsem-prestal/#reply1496521

ove

14. 1. 2022 12:31:13

Tohle to určité míry řeší knihovna turbo https://turbo.hotwired.dev/handbook/installing

Funguje to tak, že si uloží do history celou stránku a pak ji celou obnoví, včetně těch už načtených věcí a scroll position. Problém ale může být, pokud třeba nějaký JavaScript spouštíš při načtení stránky, protože ten se spustí jenom při původním vstupu na stránku a ne při navigaci v ní, musíš to pak dělat při eventu turbo:load

14. 1. 2022 12:31:13

https://webtrh.cz/diskuse/php-ajax-nacitani-dalsich-zaznamu-a-vraceni-zpet-tam-kde-jsem-prestal/#reply1496520

crs

(1 hodnocení)

15. 1. 2022 15:02:36

@franta: Odpověď na poslední část původního příspěvku: Case study. Máš 9 produktů/stránku. Návštěvník naloaduje 6 stránek, pak se vrátí např. na stránku 5 a klikne na 40. produkt. Před přesunem na stránku detailu si JavaScriptem si změníš URL, (pomocí kotvy nebo history.pushState) si označíš, že jsi na výpisu produktů, na stránce 5. Když se návštěvník vrátí, víš, že máš zobrazit stránku 5. A předchozí a následující stránky můžeš nabídnout buď jako klasický odkaz nebo přes tlačítko a AJAX pro dynamické načtení.

15. 1. 2022 15:02:36

https://webtrh.cz/diskuse/php-ajax-nacitani-dalsich-zaznamu-a-vraceni-zpet-tam-kde-jsem-prestal/#reply1496519

Pro odpověď se přihlašte.

Přihlásit