Naja – po úspěšném makeRequest již další ajaxové požadavky nereagují

MikKuba

Ahoj,

Začal jsem používat Naju místo nette.ajax a rozchodil jsem dlouho nefunkční jednoduchou věc – po kliknutí na tlačítko smazat z DB a serveru obrázek. S Najou takto funguje:

naja.makeRequest('POST', {link DeleteImage!}, { imageId: $(this).data("imageid")}, { history: false });

Nechci měnit URL tímto requestem, což se daří tou „history: false“.

Problém ale je, že jakmile takto smažu 1 obrázek a snippet se překreslí (obrázek zmizí), tak další již mazat nejde. Nijak to nereaguje, žádné chyby v konzoli. Zkoušel jsem přidat na další řádek něco jako:

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

..ale to nepomohlo.

Díky za tipy.
cc @jiripudil

Editoval MikKuba (13. 6. 2022 23:54)

NouF

Mám stejnou situaci, už ti to funguje? :D

MikKuba

Stále ne, jiný makeRequest se ale provádí vlastně i vícekrát – po přidání nového tagu do Select2.

Uvnitř tady se mi podaří přidat na jedno načtení 2 a více záznamů do DB:

$('.select2-tags-size').on('select2:select', function (e) {
 // code here
	naja.makeRequest('POST', {{link CreateSize!}}, { size: tag.text}, { history: false });
	// NAJA zde funguje opakovaně
});

Problém je jen s tím vyvolaným pomocí kliknutí.

Editoval MikKuba (14. 6. 2022 21:20)

NouF

Můj select box přestane odesílat makeRequest po tom, co ho překreslím. (Když ho nepřekreslím, tak funguje jak má)

Martk

Nebude to tím, že event je navěšený na konkrétní element, ale přes naja ho překreslíš, takže už to nereaguje na tvůj event, protože se jedná o nový element? Jestli ano, tak ti pomůže event delegation

MikKuba

Martk napsal(a):

Nebude to tím, že event je navěšený na konkrétní element, ale přes naja ho překreslíš, takže už to nereaguje na tvůj event, protože se jedná o nový element? Jestli ano, tak ti pomůže event delegation

@Martk Javascript používám okrajově, když je něco potřeba sepsat tak si poradím, ale většinou trochu zkouším. A s event delegation nemám úplně zkušenost a co jsem se díval, tak nic jako eventDelegation() neexistuje, ale spíš to je název nějakého „postupu“, že?

Zkusil jsem například upravit svůj JS následovně, ale nefunguje stále:

$('.js-priority-up').click(function(event){
    naja.makeRequest('POST', {link PriorityUp!}, { imageId: $(this).data("imageid")}, { history: false });
    event.preventDefault();
  });

K tomu je výše v kódu formuláře uvnitř snippetu toto, což spouští výše uvedený skript:

<td>
 {$image->priority}
 <a data-imageid="{$image->id}" class="ajax js-priority-up"><i class="fa fa-arrow-circle-up"></i></a>
 <a data-imageid="{$image->id}" class="ajax js-priority-down"><i class="fa fa-arrow-circle-down"></i></a>
</td>

Budu moc rád za bližší navedení! Děkuju!

Editoval MikKuba (15. 6. 2022 14:02)

Pepino

@MikKuba

$('body').on('click', '.js-priority-up', function(e){
    naja.makeRequest('POST', {link PriorityUp!}, { imageId: $(this).data("imageid")}, { history: false });
    event.preventDefault();
});

Marek Znojil

Já to dělám tak, že do Naji zaregistruji rozšíření, ve kterém provádím inicializace:

// Spuštění Naji.
(() => {
  'use strict';

  window.addEventListener('load', () => {
      naja.registerExtension(new RegStackExtension);
      naja.initialize();
  });
})();

// Třída rozšíření.
class RegStackExtension{

  constructor(){
      this._init();
  }

  initialize(naja){
    naja.snippetHandler.addEventListener('afterUpdate', (e) => {
      	this._init();
    });
  }

  _init(){
    // události, vlastní stack, atd.
  }

}

Vždy po přepsání (afterUpdate) mi toto rozšíření znovu aktualizuje potřebné události.

Editoval Marek Znojil (15. 6. 2022 15:30)

MikKuba

Pepino napsal(a):

@MikKuba

$('body').on('click', '.js-priority-up', function(e){
    naja.makeRequest('POST', {link PriorityUp!}, { imageId: $(this).data("imageid")}, { history: false });
    event.preventDefault();
});

Super, toto řešení je funkční, děkuju!

@MarekZnojil To vypadá taky zajímavě, vím že jsem se předtím taky snažil Naju nějak re-inicializovat, ale jinak a to nešlo. Tohle si ponechám jako případnou pomoc do budoucna, když budu řešit složitější věci a zaseknu se. Díky!