Dialog, AJAX-Requests und doppeltes HTML

  • Hallo,

    ich frage mich gerade was das beste Vorgehen ist, wenn man Dialoge per AJAX (z.B. bei Klick auf Button) lädt.
    Mein Problem ist nämlich, dass HTML dann doppelt vorkommt, was wiederum zu Problemen mit JS führt und ansonsten auch nicht schön ist.

    Beispiel:

    data.returnValues.dialog gibt dann ein weiteres Template per PHP zurück, was ungefähr so aussieht (gekürzt):

    Wird per jsSendInvoice nun der Dialog erstmalig geöffnet, funktioniert alles wie gewünscht. Wird dieser aber geschlossen und nochmals per jsSendInvoice geöffnet, befindet sich das Element confirmSendInvoice{$invoice->invoiceID} mehrfach im Quelltext. document.getElementById('confirmSendInvoice{$invoice->invoiceID}') gibt hier dann ggf. das falsche, veraltete Element zurück und der Dialog-Inhalt kann nicht korrekt aktualisiert werden.


    Wie ist hier das Best-Practice bzgl. Dialoge, Ajax etc.?


    Grüße

    • Offizieller Beitrag

    Die Verwendung von IDs ist grundsätzlich anfällig für solche Probleme, die Nutzung von Klassen wäre grundsätzlich empfehlenswert. In den Callbacks der Dialog-API bekommst du das content-Element als Parameter und kann dann spezifisch mit content.querySelector() die Elemente eindeutig identifizieren.

    Die API UiDialog.openStatic() ist konzeptionell für simple Dialoge gedacht gewesen, bei denen man keine Logik hat und nur einen kleinen Dialog anzeigen möchte. In der Folge geht diese Methode auch davon aus, dass das HTML idempotent ist - dies ist bei der Nutzung von IDs aber nicht gegeben.

    Als Workaround (!) kannst du vor dem Öffnen des Dialogs vorherige Instanzen entfernen:

    JavaScript
    if (UiDialog.getDialog("sendInvoice") === undefined) {
        UiDialog.destroy("sendInvoice");
    }

    Die „best practice“ wäre der Verzicht auf IDs und openStatic().

  • In den Callbacks der Dialog-API bekommst du das content-Element als Parameter und kann dann spezifisch mit content.querySelector() die Elemente eindeutig identifizieren.

    Hier habe ich aber z.B. schon öfters das Problem gehabt, dass beispielsweise das onShow(dialog)-Callback ja mehrfach getriggert wird und ein EventListener dann öfters angeheftet wird. Hier wäre ein Callback wie onPrepare oder so hilfreich, was nur 1x pro Dialoginstanz getriggert wird.

    Als Workaround (!) kannst du vor dem Öffnen des Dialogs vorherige Instanzen entfernen:

    Danke, aber UiDialog.destroy erwartet ein Object und wirft ansonsten ein Fehler. Ich hatte mich schon öfters gewundert, wieso es keine öffentliche Methode gibt, die anhand der ID ein Dialog zerstören kann.

    • Offizieller Beitrag

    Hier habe ich aber z.B. schon öfters das Problem gehabt, dass beispielsweise das onShow(dialog)-Callback ja mehrfach getriggert wird und ein EventListener dann öfters angeheftet wird. Hier wäre ein Callback wie onPrepare oder so hilfreich, was nur 1x pro Dialoginstanz getriggert wird.

    Meinten Sie: onSetup(content)? ;)

    Danke, aber UiDialog.destroy erwartet ein Object und wirft ansonsten ein Fehler. Ich hatte mich schon öfters gewundert, wieso es keine öffentliche Methode gibt, die anhand der ID ein Dialog zerstören kann.

    Du hast Recht, in dem Fall muss der Code so aussehen:

    JavaScript
    const dialog = UiDialog.getDialog("sendInvoice");
    if (dialog !== undefined) {
        UiDialog.destroy(dialog);
    }
  • Habe das Problem nun über einen zweiten AJAX-Request gelöst, der den 2. Dialog öffnet. Gleichzeitig nutze ich keine IDs mehr und dafür die onShow/onSetup-Callbacks. Ansonsten schaue ich mir beim nächsten komplexeren Dialog-Thema mal UiDialog.open an :)

    P.S. UiDialog.destroy scheint nicht für Dialog zu funktionieren, die mit UiDialog.openStatic geöffnet wurden. Diese Lösung konnte ich also nicht nutzen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!