Duplicitní dialog netteFormsModal s ajaxem (Naja.js)

d@rkWolf
Člen | 167
+
0
-

Zdravím, narazil jsem na zvláštní problém, po inicializaci Naja.js se vkládá do stránky 2× modal dialog od NetteForms.js validace. U formuláře mám nastavenou třídu „ajax“. Netušíte, čím to může být? Ptal jsem sei na Naja diskuzích, ale zatím nic, jsem trochu zoufalý :-(

Mám aktuální NetteForms, aktuální verzi JS scriptu, aktuální Naja 3.cosi. Upgradoval jsem z Naja 1.8.x kvůli snaze vyřešit potíže s TreeView v Ublaboo/Contributte Datagridu. Nepoužívám Webpack ani nic podobného, všechny JS soubory mi v pořadí Naja->NetteForms->Front.js spojí(a na produkci minifikuje) Webloader (upgradovaná verze od Gappa podporující aktuální Nette a PHP 8+). Je to úplně obyčejný kontaktní formulář, 3 text pole, textarea a odeslat, ještě se to teda renderuje přes rozšíření Contributte/Forms-bootstrap(verze by měla být kompatibilní s aktuální NetteForms dle composeru) a řeší to akorát formát html a stylování do formátu Bootstrapu-na validační dialog to nijak nešahá pokud vím.

V front.js mám jen toto – jen inicializace Naja, „afterUpdate“, kterým jsem nahradil „load“ z Naja 1.8.x dle migračního návodu (nic z dalšího kódu nemá na situaci vliv, stačí nechat první 3 řádky a modal od formu se otevře 2× přes sebe(pokud ale dám naja.inicialize pryč, ajax přestane fungovat), tohle je pro front-end, v adminu, který má zajaxované celé stránky mám kódu víc, ale výsledek je stejný:

"use strict";
document.addEventListener('DOMContentLoaded', () => {
    naja.initialize();
});

// Naja: run after ajax update
naja.snippetHandler.addEventListener('afterUpdate', (event) => {
    // todo (re)initialize stuff

    // Activate scrollspy to add active class to navbar items on scroll
    $('body').scrollspy({
        target: '#mainNav',
        offset: 56,
    });
});

// Naja: handle snippets on 4xx errors
naja.addEventListener('error', ({xhr, response}) => {
    if ((xhr.status >= 400 && xhr.status <= 499) && response.snippets) {
        naja.snippetHandler.updateSnippets(response.snippets);
    }
});

...nějaké jQuery scripty(nemají vliv)

Zkoušel jsem i variantu jen:

"use strict";
naja.initialize();

Výsledek je stejný, 2× vložený modal(dialog – nebýval to dříve Alert?).

Nejsem si moc jistý, jak to má správně být, našel jsem obě varianty, s js moc kamarád nejsem, obvykle stačilo $(document).ready(function() { } a do toho skopírovaný kód z dokumentace nějakého carouselu či jiného externího scriptu.

Editoval d@rkWolf (22. 8. 2024 20:59)

makak
Člen | 2
+
0
-

To může být způsobeno tím, že se NetteForms.js znovu spouští při každém afterUpdate eventu v Naja.js, což může způsobit zduplikování modálních dialogů.

MajklNajt
Člen | 503
+
0
-

Nahodil som Naju na svoj nový projekt, a narazil som na rovnaké správanie, dialog sa do DOMu pridá 2× po ajaxovom submite

jiri.pudil
Nette Blogger | 1032
+
0
-

Ha, taky už se mi to podařilo zreprodukovat.

Kde je problém: Naja od verze 3.2.0 poslouchá při zpracování formulářů už jen na událost submit. Na tutéž ovšem reaguje i skript netteForms. Pokud se netteForms inicializuje dřív než Naja, zpracuje událost nejprve netteForms, ale potom ji předá dál, kde si ji převezme Naja a zvaliduje formulář znovu.

Řešení mě napadá několik:

  1. K tomuhle vůbec nedojde, když na JS použiješ jakýkoliv bundler a netteForms skript budeš importovat. Potom se sice načte, ale nenavěsí se na formuláře na stránce. To udělá až potom Naja, a to ve správném pořadí, jen je jí potřeba předat netteForms.
  2. I bez bundleru by to teoreticky mohlo jít obejít tak, že před načtení netteForms zařadíš skript, který vypne auto-init:
    window.Nette.noInit = true;
    
  3. Nejlepší by samozřejmě bylo opravit to u zdroje. Na straně Nette by myslím pomohlo, kdyby tady bylo stopImmediatePropagation() namísto stopPropagation(). Ale nevím, jestli neexistuje nějaký důvod, proč to je právě takhle, cc @DavidGrudl

    Alternativně by to mohla nějak zohlednit Naja a nevalidovat formulář podruhé, ale netuším, jak by mohla rozpoznat, že netteForms ten formulář právě teď zvalidovalo 🤔

Editoval jiri.pudil (16. 12. 2024 13:45)

jiri.pudil
Nette Blogger | 1032
+
+3
-

Ad 3: otevřel jsem pull request