Naja – získání JSON ze zpracování formuláře
- Kajda23
- Člen | 42
Ahoj,
řeším následující případ: mám formulář, který byl dosud standardně
odesílaný bez ajaxu. Nyní vznikla situace, kdy jej na základě nějaké
proměnné potřebuji někdy odeslat bez ajaxu a přesměrovat, někdy zpracovat
ajaxem a vrátit z něj JSON s nějakým výsledkem zpracování, se kterým
se pak pracuje.
Protože jsem se dosud ajaxu poměrně úspěšně vyhýbal, a když, tak to bylo ještě v dobách nette.ajax.js, nejsem v tom úplně zběhlý. Na webu je zmiňována Naja nebo Nittro. Otevřel jsem Naju, formulář ajaxem odeslal, ale nevím, jak a kde načíst ten vrácený JSON. Chybí mi v dokumentaci nějaké příklady použití, jsou popsány parametry, ale nevím, jak je pospojovat. Nakopne mě někdo?
- jiri.pudil
- Nette Blogger | 1029
Ahoj,
pokud tě chápu správně, pro Naju je tohle tak trochu okrajový use case – Naja řeší především integraci s mechanismy, které pro podporu AJAXu nabízí Nette (tzn. zejména snippety). Pokud žádný takový mechanismus nevyužíváš, Naja ti nejspíš nedá žádnou přidanou hodnotu a úplně klidně si ten formulář můžeš odeslat napřímo třeba přes Fetch API a s odpovědí pak naložit dle libosti.
S Najou to je ostatně taky zdaleka nejjednodušší, pokud ten request
odesíláš ručně; metoda makeRequest()
totiž vrací Promise,
která se resolvuje na zparsovaný JSON payload ze serveru:
naja.makeRequest(method, url)
.then(payload => {
// typeof payload === 'object'
});
(Hm, bylo by pěkné, kdyby tu promisu vracely i
naja.uiHandler.clickElement
a
naja.uiHandler.submitForm
, což momentálně nedělají.)
Pokud necháváš formulář odeslat Naju (pomocí
class="ajax"
), můžeš se k payloadu dostat v eventu success
:
naja.addEventListener('success', (event) => {
// typeof event.detail.payload === 'object'
});
- Hitny14
- Člen | 90
@jiripudil Ahoj, měl bych prosím zase otázku? Odesílám formulář Najou (pomocí class=„ajax“) ale nemůžu se dostat k payload. Při použití kódu:
naja.addEventListener('success', (event) => {
console.log(event);
});
Do konzole se mi nic nepropíše. Nemusím ještě někde něco nastavit? Děkuji
- jiri.pudil
- Nette Blogger | 1029
Nemusíš nic nastavit, tohle vypadá v pořádku. Skutečně se ten kód vykoná? Kdy a kde? Popř. je ten request skutečně úspěšný?
- jiri.pudil
- Nette Blogger | 1029
To je dost zvláštní, ta UI vrstva, která se váže na .ajax
elementy, toho moc nedělá, prakticky jenom připraví data a zavolá
makeRequest
. Dokázal bys prosím připravit třeba na github
nějaký minimální kód, na kterém půjde tohle chybné chování
zreprodukovat?
- Hitny14
- Člen | 90
@jiripudil Je to docela obsáhlý projekt proto jsem připravil
zkrácenou ukázku na Gist
Bude to tak stačit? Pro zpracování JS používám webpack. Naja je ve verzi
2.1.3 S Najou pracuju podle dokumentace jen mi prostě po odeslání requestu
navazaného na .ajax
nefunguje žádný event. Teď jsme si
zkoušel různé kombinace a stále nic. Pouze přes makeRequest
volaný z JavaScriptu. Děkuji
- jiri.pudil
- Nette Blogger | 1029
Bude to tak stačit?
Obávám se, že ne :/ v těch útržcích na gistu nevidím nic špatného.
Teda chybí ti tam naja.initialize
, ale to je předpokládám chyba
v přepisu na gist, jinak by se ti ten formulář ani neodeslal ajaxově.
Ideální by bylo něco, co si můžu stáhnout, rozjet a tu chybu tam spolehlivě zreprodukovat, abych si to mohl prokrokovat. Třeba kdyby se ti podařilo rozbít můj testovací sandbox…
Když si do toho sandboxu zkusím přidat listener na success
,
zavolá se správně i při kliknutí na ajaxový odkaz, proto si myslím, že
bude problém někde ve tvém kódu, možná v pořadí nějakých volání,
možná v kombinaci nástrojů anebo taky v čemkoliv jiném, bez
ucelenější ukázky můžu jenom hádat z křišťálové
koule 🤷♂️
- Hitny14
- Člen | 90
@jiripudil Ahoj, tak jsem připravil demo kde je vidět můj problém. Je tam vytvořený formulář kde event nezafunguje a pak je tam makeRequest kde to funguje dobře. https://github.com/…yCZ/NajaTest. Díky za Radu
- jiri.pudil
- Nette Blogger | 1029
Díky! Myslím, že je problém v tom, že máš ve webpacku dva různé
entrypointy. Entrypointy jsou totiž úplně samostojné, každý si vytváří
svůj vlastní graf závislostí a ve výsledku má v sobě každý zabalenou
úplně jinou instanci naja
. Jestli ti jde o to vytáhnout
sdílený kód do samostatného souboru, měl bys použít splitChunks
- Hitny14
- Člen | 90
@jiripudil Ano je to tak když si odchytím event success ve vendor.js
tak se k payloadu dostanu. Jde mi o to mít dva balíčky jeden
vendor.bundle.js
kde bude inport jQuery, Bootstrpa naja atd. Plus
inicializace nějakých potřebných scriptů. Do toho to balíčku se nebude
zasahovat tak často jako do balíčku main.bundle.js
kde budou
obsaženy všechny moje scripty. rozdělení je myšleno o ohledně cache
v prohlížeči když se nebude tak často měnit ten vendor. Myslí, že je to
dobrý postup nebo bys poradil jiný postup? Po případě mohl bys mi poradit
jak nastavit ten splitChunks nějak si s tím nevím rady. Děkuji
- jiri.pudil
- Nette Blogger | 1029
Jop, to je správná myšlenka, ale neřeší se to přes entrypointy. Entrypointy se hodí např. tehdy, když máš pro každou stránku úplně jiný set skriptů. Pro sdílení vendor skriptů nebo i společného aplikačního kódu slouží právě splitChunks a zrovna tyhle dva případy jsou pokryté v dokumentaci i s ukázkami :)