NAJA – svazani s jinym elementem nez odkazem, formularem

Ahoj, Naju skutečně zajímá jenom click na odkaz s třídou ajax nebo odeslání takového formuláře. Pokud chceš vyvolat ajaxový request i jinou interakcí, musíš si to zařídit sám:

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

    const element = document.querySelector('#id_table_td');
    element.addEventListener('blur', () => naja.makeRequest('GET', '/url'));
});

Neber si to prosím nijak špatně, ale asi bych na tvém místě věnoval trochu víc pozornosti JavaScriptu a DOM API, než se pustíš do takovéhle integrace. Z toho kódu křičí, že moc nevíš, co děláš :)

Předně nemá smysl pro každý element navěšovat listenery, to by mělo proběhnout jenom jednou a ideálně v tom rozšíření. Pro každý element už pak chceš jen na blur vyvolat request, což je kód z mého předchozího příspěvku. O zobrazení a skrytí spinneru by se pak mělo postarat právě ono rozšíření.

Zadruhé: addEventListener obecně očekává listener, tj. funkci. Ty ovšem místo předání reference na funkci tuto funkci rovnou voláš (startSpinner(el)), stane se tedy to, že při bluru se správně zavolá zaregistrovaná arrow function, v rámci které se ovšem hned zobrazí a zase schová spinner (protože tam ty funkce rovnou voláš) a výsledky těch dvou volání se zaregistrují jako listenery v Naja – ty výsledky jsou mimochodem undefined, protože ani jedna z těch funkcí nic nevrací.

---

Myslím že chceš něco takového:

document.addEventListener('DOMContentLoaded', () => {
    // Zaregistruju si rozšíření, které se mi pak ve správné momenty postará o zobrazení a skrytí spinneru.
    naja.registerExtension(new LoadingIndicatorExtension('#globalSpinner'));

    // Inicializuji Naju.
    naja.initialize();

    // To chování na blur je mimochodem potřeba zaregistrovat nejen teď, ale i po každém překreslení snippetů,
    // protože překreslením se nahradí elementy v DOMu, na které jsou ty listenery navěšené. Proto si to chování
    // nejdříve vytáhnu do funkce:
    const bindBlur = (container) => {
        const hostnames = container.querySelectorAll('.td-hostname');
        hostnames.forEach((element) => {
            // při bluru už jen odešlu request, o spinner se postará zaregistrované rozšíření
            element.addEventListener('blur', () => naja.makeRequest('GET', '/url'));
        });
    };

    // Funkci bindBlur pak zavolám při inicializaci...
    bindBlur(document.getElementById('snippet-ubntSta2Grid-tbody')); // <-- Tady bych se mimochodem přimlouval za jiný selektor, třeba pomocí data atributu, který tomu elementu přiřadíš explicitně. ID snippetu se generuje, takže nad ním nemáš takovou kontrolu a může se ti to v budoucnu rozbít.

    // ...a pak i po překreslení snippetu
    naja.snippetHandler.addEventListener('afterUpdate', ({detail}) => bindBlur(detail.snippet));
});

Jinak všechny události, které vyvolává Naja, jsou instance CustomEvent, odtud se tedy bere detail. Ta syntax s kudrnatými závorkami v parametru je destructuring assignment.

V pohodě, všichni jsme někdy nějak začínali :) rád jsem pomohl, neberu to úplně jako ztrátu času, ale i jako splátku toho, že v mých začátcích pomáhali a radili jiní mně. Třeba to zas někdy oplatíš ty budoucím začátečníkům a koloběh bude pokračovat ;)

Přiznám se taky, totálně plavu v JS. Včera bez pomoci kamráda, bych vůbec nezvládl zaslat PR na vylepšení Naji a ještě není vůbec ideální https://github.com/…aja/pull/207 , raději implentaci nechám na @jiri.pudil .

Editoval ppar (19. 1. 2021 16:42)