Bootstrap modal + Nette form (+Naja)

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.

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.

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

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 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. 2022 21:50)

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.

@Šaman Ahoj, chtěl sjem se optat, zda Jsi nakonec dal na Github to řešení Bootstrap modal okna, které se zavře na základě zpracování formuláře na server, popř. rovnou odkaz, díky.

Petr Parolek napsal(a):

@mbrecher tady je ukázka https://github.com/…test-project .

Ahoj, nevíte, jak prosím upravit kod, aby v odkazu Launch edit form in modal nebyl parametr isModal?

@Pepino nefunguje dobře modal se zavře, ale nezmizi v html:

<div class="modal-backdrop fade show"></div>

takže stránka zůstává napůl průhledná a stránku nelze ovládat.

Přikládám diff dle tvé rady:

diff --git a/app/Presenters/HomepagePresenter.php b/app/Presenters/HomepagePresenter.php
index ca3e969..e428162 100644
--- a/app/Presenters/HomepagePresenter.php
+++ b/app/Presenters/HomepagePresenter.php
@@ -15,10 +15,9 @@ final class HomepagePresenter extends Presenter
 	 */
 	public $database;

-	public function beforeRender(): void
+	public function actionEdit(): void
 	{
-		if ($this->isAjax() && (bool) $this->getParameter('isModal')) {
-			bdump('isAjax');
+		if ($this->isAjax()) {
 			$this->payload->showModal = true;
 			$this->payload->modalId = 'myModal';
 			$this->redrawControl('modal');
@@ -33,9 +32,7 @@ final class HomepagePresenter extends Presenter

 		$form->addSubmit('ok', 'OK');

-		$isModal = (bool) $this->getPresenter()->getParameter('isModal');
-
-		if ($isModal && $this->getPresenter()->isAjax()) {
+		if ($this->getPresenter()->isAjax()) {
 			$form->getElementPrototype()->class('ajax');
 		}

diff --git a/app/Presenters/templates/Homepage/default.latte b/app/Presenters/templates/Homepage/default.latte
index cafbb11..11c5acd 100644
--- a/app/Presenters/templates/Homepage/default.latte
+++ b/app/Presenters/templates/Homepage/default.latte
@@ -8,7 +8,7 @@
     {control itemsForm}
 {/snippet}

-<a n:href="Homepage:edit, isModal => 1" class="btn btn-outline-info ajax">Launch edit form in modal</a>
+<a n:href="Homepage:edit" class="btn btn-outline-info ajax">Launch edit form in modal</a>
 <!-- Button trigger modal -->
 <button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#exampleModal">
     Launch demo modal

Editoval Petr Parolek (29. 9. 2022 13:55)

@PetrParolek nezkoušel jsem to. Co to teď dělá? Po kliku na to tlačítko se otevře modál? Po odeslání formuláře se neschová?

if (showModal === undefined || showModal === false) {
	$("#" + modalId).modal('hide');
		return;
	}
}

@Pepino podařilo se ti něco vykoumat prosím?

Díky moc, funguje, jak má, ikdyž se mi zdá kod prasácký v JS, ale asi to jinak nejde https://github.com/…03f527d57d6e . Taky jsem měl rozepsané stejné řešení, ale stále jsem doufal, že půjde použít nějak $("#" + modalId).modal('hide');

Editoval Petr Parolek (29. 9. 2022 18:44)

Můžeš kod aplikovat na mé demo s BS 5 prosím a poslat pull request? Díky.

Petr Parolek napsal(a):

Můžeš kod aplikovat na mé demo s BS 5 prosím a poslat pull request? Díky.

Je to tam.

@PetrParolek https://github.com/…oject/pull/3 tohle je muj PR