Naja – získání JSON ze zpracování formuláře

Kajda23
Člen | 42
+
0
-

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
+
0
-

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'
});
Kajda23
Člen | 42
+
0
-

Děkuju za odpověď, už je mi to jasnější. Určitě to je specifický use-case, po zpracování se mi vrací jen nějaká proměnná, která je dále využita navazujícím JS, proto nevyužívám ani snippet.

Je super, že tu tak rychle reaguješ, odpověď mi pomohla – děkuju.

Hitny14
Člen | 90
+
0
-

@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
+
0
-

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ý?

Hitny14
Člen | 90
+
0
-

@jiripudil Request je úspěšný překreslí se snippet v Network hodnotu payload vidím jen jí nedokážu odchytit v JS. když vyvolám request pomocí makeRequest tak event success zafunguje správně jde jen o formulář odeslaný pomocí "class="ajax"".

jiri.pudil
Nette Blogger | 1029
+
0
-

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
+
0
-

@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
+
0
-

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
+
0
-

@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
+
0
-

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
+
0
-

@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.jskde 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
+
0
-

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 :)