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:
jsSendInvoice.addEventListener('click', function() {
var invoiceID = jsSendInvoice.dataset.objectId;
Ajax.apiOnce({
data: {
actionName: 'showInvoiceLayer',
className: 'seo\\data\\invoice\\InvoiceAction',
objectIDs: [invoiceID]
},
success: function (data) {
UiDialog.openStatic('sendInvoice', data.returnValues.dialog, {
backdropCloseOnClick: false
});
}
});
});
Alles anzeigen
data.returnValues.dialog gibt dann ein weiteres Template per PHP zurück, was ungefähr so aussieht (gekürzt):
<div>
Foobar
<div class="formSubmit">
<div id="sendInvoiceEmail" class="button buttonPrimary">{lang}seo.acp.invoice.invoiceSendLayer.submit{/lang}</div>
</div>
</div>
<div id="confirmSendInvoice{$invoice->invoiceID}" style="display:none">
<div class="section">
<div>
<div class="to"><strong>An:</strong> <span class="value"></span></div>
</div>
</div>
</div>
<script data-relocate="true">
require(['Ajax', 'Ui/Confirmation', 'Ui/Notification', 'Ui/Dialog', 'Language'], (Ajax, UiConfirmation, UiNotification, UiDialog, Language) => {
var sendInvoiceEmail = document.getElementById('sendInvoiceEmail');
var confirmSendInvoice = document.getElementById('confirmSendInvoice{$invoice->invoiceID}');
sendInvoiceEmail.addEventListener('click', function () {
// ...
confirmSendInvoice.querySelector('.to .value').textContent = to.value.trim();
// ...
UiDialog.openStatic('confirmSendInvoice{$invoice->invoiceID}', null, {
closable: false,
title: Language.get('wcf.global.confirmation.title')
});
});
});
</script>
Alles anzeigen
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