Javascript nach XHR Request (Bilder austauschen) ausführen

[Harald65]

Hallo zusammen,

ich bin ein ziemlich unerfahrender Bastler und stehe gerade vor einem für mich großen Problem!

Ich habe mir mit Galleria (https://codepen.io/Shokeen/pen/KKXbgXo) eine Gallerie für Bilder zusammengezimmert, so weit so gut.
Nun habe ich ein Dropdown-Menü hinzugefügt welches alle Ordner mit Bildern enthält.

Nach der Auswahl im Dropdown-Menü feuert mittels jquery eine Abfrage und wechselt mir die Bilder in der Gallerie durch die Bilder des ausgewählten Ordners.

Leider aktuallisiert jedoch die "Galleria" nicht automatisch. Mit einem Button, der die function ausführt funktioniert es, nur möchte ich natürlich nicht immer extra den Button drücken, sondern, dass die Funktion nach dem Abschluss des Request gestartet wird.

        function viewer() {

          Galleria.configure({
          transition: "fade",
          imageCrop: false,
          lightbox: true,
          responsive: true,
          showInfo: false,
          height: 600,
        });
        
        Galleria.run();
        }

Wie kann ich also die funcition viewer() nach jeder Meldung "Laden von XHR beendet: POST „<URL>." automatisch ausführen?
Eventlistener? Den Statuscode 4 von XHR irgendwie abfangen und dann ausführen?

Vielen Dank für die Ratschläge!

Mfg

 

[floq0r]

$.ajax({...}).then(() => {viewer();});

oder

$.ajax({...}).then(viewer);

oder

await $.ajax({...});
viewer();

 

[Harald65]

Vielen Dank, das hat den Anstoß gegeben in welche Richtung ich zu suchen hatte

Lösung sieht so aus:

Select mit der Ordnerauswahl:

<select name="ordner" id="ordner" onchange="filter()">

Nachladen der Bilder je nach Auswahl:

  async function filter() {
    try {
      let status = document.getElementById('ordner').value;
      await $.post("include_rem.php", {
          filter: status
        },

        function(posts) {
          document.getElementById('viewer').innerHTML = posts;
        }
      );

      // Dieser Code wird nach Abschluss der AJAX-Anfrage ausgeführt.
      Galleria.configure({
        transition: "fade",
        imageCrop: false,
        lightbox: true,
        responsive: true,
        showInfo: false,
        height: 600,
      });

      Galleria.run();

    } catch (error) {
      // Hier können Sie auf AJAX-Fehler reagieren.
      console.error('Fehler beim AJAX-Request.', error);
    }
  }

  filter();

Ausgabe / Austausch der Bilder

<div id="viewer" style="padding-bottom:20px;" onload="viewer()"></div>

Danke!

Mfg
Harald

 

[[ChAoZ]]

Kleiner Anreiz von mir:
Wenn du mit jQuery arbeitest, dann arbeite mit jQuery

document.getElementById('viewer').innerHTML = '...';

durch

$('#viewer').html('...');

ersetzen.

Und.... Events am besten nicht im HTML Markup definieren sondern im JS Code.

$('div#viewer').on('change', viewer());