Naja – forceRedirect a re-inicializace scriptů

d@rkWolf

Zdravím, poradil by mi prosím někdo, jak v Naja vynutit hard redirect?

Potřebuju dostat do celo-zajaxované(v base presenteru je přímo v beforeRender nabouchaný if ($this->isAjax()) { redraw snippetů(title, flashes, content)} aplikace jeden hard redirect-pro případ, že si uživatel změní heslo, tak potřebuju, aby ho to přesměrovalo na Sign:out, který provede odhlášení a znovu-zobrazení přihlašovací obrazovky.

Nemůžu dát k formuláři data-naja-force-redirect, protože ten formulář se chová různě podle toho, co uživatel změní, odhlášení potřebuju jen když změní heslo.

A ještě druhá věc, jak u Naja re-inicializovat různé jquery scripty po ajax překreslení snippetu?

Ve starém Nette.ajax. sem to udělal nějak takto:

<script>
$(document).ready(function() {
    $.nette.init();
    $.nette.ext({
        success: function(payload, status, settings) {
            /* init only if not already a datatable */
            if (!$.fn.DataTable.isDataTable('#data-table')) {
                dataTablesInit();
            }
        }
    });

	dataTablesInit();
});
</script>

Nejsem javascriptař, reactář nebo něco podobnýho, nějaký kompilování js a podobný věci mi absolutně nic neříkají a nápověda naji mi vesměs nedává smysl…jediné, co sem z toho pochopil je, že na začátek js souboru, co si linkuju na konci stránky vrazím tohle aby se naja aktivovala, což asi (snad?) odpovídá tomu $.nette.init();

<script>
document.addEventListener('DOMContentLoaded', naja.initialize.bind(naja));
</script>

jiri.pudil

Zdravím, poradil by mi prosím někdo, jak v Naja vynutit hard redirect?

Ahoj, ještě se dá poslat forceRedirect ze serveru:

$this->payload–>forceRedirect = true;

Tato možnost je v poslední verzi (1.7.0) deprecated a mám v plánu ji ve 2.0 odstranit, protože „to, že se dá zpracování requestu ovlivnit ze serveru v response, teď zpětně vnímám jako slepou větev. Server by měl klientu říct, co po něm chce, ale už mu nediktovat, jak to má udělat – to ať je v režii klienta.“ (zdroj)

Proč vůbec potřebuješ tvrdý redirect? Přidávání i mazání cookies (tj. odhlášení) by se přece mělo zpropagovat i přes ajaxový request, stejně tak přesměrování na přihlašovací stránku, pokud na ní překresluješ snippety.

A ještě druhá věc, jak u Naja re-inicializovat různé jquery scripty po ajax překreslení snippetu?

Naja podobně jako nette.ajax.js vyvolává spoustu událostí, mezi nimi po každém requestu success nebo error a vždy complete. Pro inicializaci různých skriptů je ale nejvhodnější load, protože se volá nejen po každém ajaxovém requestu, ale i při prvotním načtení stránky a inicializaci Naja, takže můžeš mít inicializaci věcí jen jednou a na jednom místě:

naja.addEventListener('load', () => {
	// todo (re)initialize stuff
});

Případně pokud bys potřeboval či chtěl granulárnější přístup, třeba kvůli výkonu, dá se navěsit i na událost po překreslení jednotlivých snippetů, a inicializovat věci jenom v podstromu DOMu:

naja.snippetHandler.addEventListener('afterUpdate', (event) => {
	// todo (re)initialize stuff
	// event.snippet holds the reference to the updated DOM element
});

OT:

Nemůžu dát k formuláři data-naja-force-redirect, protože ten formulář se chová různě podle toho, co uživatel změní, odhlášení potřebuju jen když změní heslo.

Takové formuláře mám jako uživatel ze všech nejraději :) nikdy nevím, co můžu a nemusím vyplnit, když chci změnit jednu jedinou věc, a vždycky mám obavy z toho, co rozbiju tím, že něco nevyplním, typicky zrovna tu změnu hesla. Můj úplně nejoblíbenější je tenhle

d@rkWolf

Mno, to je proto, že login stránka ajaxová není, SignPresenter mám samostatnej, má vlastní speciální osekanou šablonu, nedědí od BasePresenteru admin modulu, kterej hlídá přihlášení pro celý admin a obsahuje šablonu admin rozhraní, s přihlášením není problém, tam se to pošle ne-ajaxově a vše je v pohodě, jen to odhlášení z Ajaxového formuláře ven.

To řešení ajaxových stránek je dle návodu, který byl u Nette.history.ajax, s kterým jsem to zkoušel ještě na starší verzi Nette(na 3 to sabotuje composer a já se s ním hádat nechci), netuším, jestli je to správný řešení, ale na jiný sem zatím nepřišel. Zkoušel jsem dřív i verzi, kdy se login otvíral v rámci base presenteru admin modulu, ale tam bylo složitý laborovat se scriptama, protože já nechci, aby nepřihlášený viděl scripty, které mám v adminu(z toho se dá vyčíst spousta věcí a u řady bohužel starých komponent, co nemám čím nahradit netuším, jak moc jsou případně děravé…), takhle vidí bez přihlášení tak akorát 3 řádky js na zobrazení hesla a netteForms.js…

Zdá se, že s tím payloadem se to odhlašuje správně, super.

V tom loadu to zdá se funguje, díky. Už se mi přepíná zobrazení hesla.

ad OT: mno vono je tam uvedeno upozornění, že po změně hesla bude uživatel automaticky odhlášen :-)

Teď mě čeká zprovoznění Ublaboo Datagridu, tak doufám, že to s Najou pojede jak sem našel na githubu(protože návod na contribute tvrdí, že je třeba nette.ajax)

jiri.pudil

Mno, to je proto, že login stránka ajaxová není

Rozumím. Ještě zvážím, jestli to odstranění podpory forceRedirect v payloadu dává smysl (nejsi první, kdo se na to ptá), případně jestli by to přesměrovávací API nešlo trochu víc otevřít, abys nad tím měl jako programátor v JS větší kontrolu. Takhle od stolu mě napadá, že by Naja před přesměrováním mohla vyvolat nějakou událost, v jejíž obsluze bys mohl přesměrování zvrátit nebo právě vynutit tvrdý redirect.

Hitny14

@jiripudil
Ahoj,

prosím tě mohl bych tě požádat o radu? Snažím se vyřesit re-inicializaci javascriptů a nedaří se mi to. Jde mi o to je po kliku na radio input bych potřeboval ajaxem překreslit další radio inputy. To se mi podaří ale další klik v již překresleným snippetu nefunguje. zkoušel jsme použít událost load ale v nové verzi už asi není. Mohl bys mě nějak navést jak na to? Děkuji moc

jiri.pudil

Přesně tak, load ve verzi 2 už není, doporučovanou náhradou je afterUpdate snippetu.

Hitny14

@jiripudil Asi to pořád řeším špatně. Můj příklad:

const init = () => {
	new Vue({
		el: '#element',
		data: {
			radio1: '',
			radio2: '',
		},
		methods: {
			select: function(event) {
				const value = event.target.value,
					  link = event.target.dataset.link;

				naja.makeRequest('POST', link, {variant: variant})
			}
		}
	})
}

init();

naja.snippetHandler.addEventListener('afterUpdate', (event) => {
    init();
});

Takto mám udělaný JavaScript v link je odkaz na handle kde překresluju snippet a další klik na radio input mi nefunguje. Mohl bych tě prosím poprosit o radu jak na to? Děkuji moc

jiri.pudil

Rád bych pomohl, ale z pohledu Naja je to takhle v pořádku. S Vue bohužel nemám zkušenosti, takže neporadím, jaký je správný způsob reinicializace nebo remountování komponenty. Osobně bych ale možná ani nemíchal Vue komponentu dohromady s Nette snippety; když už tam mám Vue, použil bych k tomu nástroje a API Vue a nesahal mu pod rukama do DOMu jinou knihovnou. Ale to záleží i na tom, co a jak vlastně implementuješ.

Hitny14

@jiripudil Ok, pokusím se na to nějak přijít. Díky za nasměrování :)

dakur

@Hitny14 Jen bych doplnil, že Naja můžeš samozřejmě používat i tak – můžeš si na serveru udělat API endpointy, které budou přijímat requesty ze tvé Vue appky a vracet response. Vue pak bude volat jen naja.makeRequest() a zpracovávat odpovědi. Nebo můžeš použít obyčejný fetch, který ostatně Naja používá taky. Naja má oproti fetch v této variantě tu výhodu, že umí např. zpracovat redirect vrácený responsem z Nette.