Bootstrap modal + Nette form (+Naja)

Šaman
Člen | 2594
+
0
-

Ahoj, používám Bootstrap modal pro zobrazení formuláře v modálním okně. Ale po odeslání nechci ihned zavřít modal, protože formulář může být odeslaný chybně (serverová validace). Takže na submit tlačítku nemám navěšený JS pro zavření modalu. Používám snippety, takže s vypsáním validačních chyb není problém – překreslím jen ten formulář.

Mohu ale nějak zařídit zavření modalu až na základě zpracování formuláře?
Po úspěšném pracování překresluji celou stránku – flashmessage vyskočí, přesto mi zůstane celá stránka zašedlá a nelze na ni klikat (jako kdyby přes ni bylo modální okno, které ale není zobrazené). Pomohlo až vytvořit snippet v samotném tagu <body n:snippet="body">. Což není úplně košer – raději bych překreslil jen flasmessage a modal. Imho zapnutí modalu změnilo nějaké atributy přímo na <body> a pouhé překreslení modalu ho sice skrylo, ale ty změny na <body> zůstaly.

Máte nějaký osvědčený způsob, jak zpracovat Nette formulář v BS modalu tak, že zavření modálního okna zařídí překreslení snippetu?

Díky.

P.S. Používám Naju, ale v tomto se používá jen pro snippety. Modal je na ní zcela nezávislý.

Editoval Šaman (28. 1. 2021 8:06)

lookass
Člen | 50
+
0
-

Ahoj, vím, že se ptáš na Naju, ale nikdo nereagoval, tak bych si dovolil napsat, že Nittro tohle umí. Návod i příklad je na Nittro fóru

medhi
Generous Backer | 249
+
+3
-

Ahoj, stačí po úspěšném zpracování formuláře poslat $this->payload->closeModal = true; a do svého JS si dopsat toto zpracování, které modal zavře:

naja.addEventListener('success', event => {
	if (typeof event.detail.payload.closeModal !== 'undefined') {
		$('#myModal').modal('hide');
	}
});

Píšu to z hlavy, tak dej vědět, kdyby to nešlo, ale snad je jasný princip.

monty
Člen | 66
+
0
-

Ahoj.
Prosím pěkně, nedaří se mi zachytit Najou odeslání formuláře ve vyskakovacím modalu (dokresleným taktéž ve snippetu přes ajax).

// Přesedlal jsem z nette.ajax knihovny, kde jsem po vykreslení modalu volal...
$.nette.load();
naja.initialize(); // Mi vyhodí exception.

//Zkusil jsem teda naprasáka...
delete naja.initialized; //...ale to se rozbije uplně všechno :c)

Díky za radu :)

Šaman
Člen | 2594
+
0
-

Já to mám ještě rozkopaný, pak jsem chtěl dát na GitHub celou ukázku projektu. Ale jestli myslíš ajaxové odeslání formuláře, pro to jsem nic dělat nemusel. Mám Naju 2 a v základu jediné co potřebuji je

document.addEventListener('DOMContentLoaded', () => naja.initialize());

O chlup slozitější bylo až ovládání toho modal okna.

jiri.pudil
Nette Blogger | 1011
+
+1
-

Naja se na .ajax elementy v překreslených snippetech znovu-navěšuje sama, není potřeba nic volat. Pokud ale otevíráš modal nějakým javascriptem, je možné, že to v DOMu vyrobí nové elementy, o kterých Naja neví. V takovém případě budeš muset ajaxové chování navěsit ručně.

monty
Člen | 66
+
0
-

Paráda, moc děkuju! Tohle jsem v dokumentaci nepostřehnul :)

Pepino
Člen | 155
+
0
-

@vb76 Muzes v payloadu po uspesnem zpracovani formulare poslat napr closeModal=true a poladit si prekresleni snippetu https://naja.js.org/#…

Editoval Pepino (4. 4. 19:56)

vb76
Člen | 13
+
0
-

Pepino napsal(a):

@vb76 Muzes v payloadu po uspesnem zpracovani formulare poslat napr closeModal=true a poladit si prekresleni snippetu https://naja.js.org/#…

Jde mi spíše přímo o toto:

Ale po odeslání nechci ihned zavřít modal, protože formulář může být odeslaný chybně (serverová validace).

Pokud dojde k chybě, kterou předám přes $form->addError modal se po odeslání zavře. Když ho znovu otevřu, je formulář vyplněný, chyba zobrazena. Ale já nechci, aby se zavíral, když obsahuje info o chybě.

Hledám nějaké info, jak zamezit zavíraní modalu, když je zobrazena nějaká chyba. Pokud vše proběhne v pořádku, modal se zavře a obsah inputů vymaže. To je žádoucí a to mám vyřešené.

Pepino
Člen | 155
+
0
-

@vb76 zpracovavas ten formular v modalu ajaxem?

vb76
Člen | 13
+
0
-

Pepino napsal(a):

@vb76 zpracovavas ten formular v modalu ajaxem?

V modalu na form mám třídu ajax. Na formulář je vytvořena továrna a je v BasePresenter. Jedná se o registrační formulář, který je možné zobrazit na jakékoliv stránce.

Nicméně se to chová podobně i bez ajaxu, pokud bych ho nechtěl použít. Potřebuji asi jen nakopnout, jakým směrem jít. Třeba ověřuji e-mail na chybném místě v nesprávnou dobu. Takhle to mám zažité, ale modal pro formuláře používám poprvé.

Ve zpracování formuláře, po úspěšné validaci, ověřuji e-mailovou adresu v databázi. Pokud existuje, nastavím $form->addError().

		$form->onSuccess[] = function (Form $form, \stdClass $data) use ($onSuccess): void
		{
			if($this->user->checkEmail($data->iEmail))
			{
				$form->addError('E-mailová adresa již v systému existuje!');
			}
			else
			{
				$this->user->add($data);
			}
			$onSuccess();
		};

Formulář se odešle, modal zavře, ale obsahuje info z $form->addError(‚E-mailová adresa již v systému existuje!‘); Poku formulář znovu otevřu, je vše správně, ale já nechci, aby se zavíral, pokud obsahuje chybu. Potřebuji tomu nějak zamezit a vůbec netuším kde hledat, jakým směrem jít.

Editoval vb76 (4. 4. 21:50)

Pepino
Člen | 155
+
+2
-

@vb76 třídu ajax tam mít můžeš, ale otázka jestli se ti formulář ajaxem zpracovává.

Ověření emailu dej přímo na políčko iEmail.

$form->addEmail('iEmail')
	->addRule(function($control) {
		return $this->user->checkEmail($control->value)
	}, 'E-mailová adresa již v systému existuje!')
vb76
Člen | 13
+
0
-

Pepino napsal(a):

@vb76 třídu ajax tam mít můžeš, ale otázka jestli se ti formulář ajaxem zpracovává.

Ověření emailu dej přímo na políčko iEmail.

$form->addEmail('iEmail')
	->addRule(function($control) {
		return $this->user->checkEmail($control->value)
	}, 'E-mailová adresa již v systému existuje!')

Děkuji za TIP. Nicméně to problém se zavíráním modalu nevyřešilo. Toto pravidlo se stejně zavolá až po odeslání formuláře. To znamená, že bez ajaxu se problém nepodaří vyřešit…

Původně jsem si myslel, že se nejprve provedou javascriptová pravidla na straně klienta, pak se zpracuje onValidate a až pak se odešle formulář a zpracuje se onSuccess.

Pepino
Člen | 155
+
0
-

@vb76 pokud nebudeš ten formulář zpracovávat ajaxem tak se ti vždycky ten modal zavře.

Ano první se provedou javascriptová pravidla, pokud jsou v pořádku formulář se odesílá a přechází se k serverové validaci. Pokud serverová validace projde přechází se k onSuccess. Ale tady jsme opět u toho. Pokud nezpracováváš ajaxem tak javascript prostě neověří jestli zadaný email už existuje nebo ne.