So lösen Sie ein Javascript-Änderungsereignis auf einer versteckten Dateieingabeschaltfläche aus
Posted: 12 Jan 2025, 14:32
Ich erstelle einen Inhalt im Modal „Bestellzusammenfassung“ mit Javascript. Als Teil der Tabelle möchte ich einem Benutzer die Möglichkeit geben, entweder ein Bestellbestätigungs-PDF zu erstellen oder dieses PDF aus dem lokalen Speicher anzuhängen. Die Anhangfunktion erfolgt über eine versteckte Eingabeschaltfläche, die über eine sichtbare und speziell gestaltete Senden-Schaltfläche aufgerufen wird
Die Seite wird korrekt gerendert und wenn Sie auf die Schaltfläche Bestellung anhängen klicken, wird das Datei-Explorer-Fenster geöffnet, in dem Sie die richtige Datei auswählen können. Wenn die Datei jedoch ausgewählt und bestätigt wird, wird das Ereignis change nicht ausgelöst. Ich sehe in der Konsole keine diesbezüglichen Protokolle. Die Schaltfläche friert auch etwas ein – ein zweiter Klick darauf öffnet kein Datei-Explorer-Fenster.
Ich teste dies in Firefox 134.0 unter Ubuntu 22.04.
Bearbeiten
Ich habe vergessen hinzuzufügen, dass die Suche hier Hinweise auf zwei Hauptgründe gibt, die die Ursache dafür sein könnten:
Code: Select all
summaryContainer.innerHTML = '';
for (const [supplierId, group] of supplierGroups) {
const supplierDiv = document.createElement('div');
supplierDiv.className = 'supplier-summary-table';
let supplierHtml = `
Supplier: ${group.supplier.supplierName}
`;
// Add order confirmation section
supplierHtml += `
Purchase Order
[i][/i] Generate PO
or
`;
supplierDiv.innerHTML = supplierHtml;
summaryContainer.appendChild(supplierDiv);
// Create and attach file input programmatically
const uploadContainer = supplierDiv.querySelector(`#upload-po-container-${supplierId}`);
const uploadButton = document.createElement('button');
uploadButton.className = 'btn btn-outline-secondary';
uploadButton.innerHTML = '[i][/i] Attach PO';
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.pdf';
// fileInput.className = 'form-control';
fileInput.id = `po-upload-${supplierId}`;
fileInput.dataset.supplierId = supplierId;
uploadContainer.appendChild(fileInput);
uploadContainer.appendChild(uploadButton);
fileInput.addEventListener('change', function(e) {
console.log("change event triggered");
}, false);
uploadButton.onclick = (e) => {
e.preventDefault();
fileInput.value = ''; // Reset value to ensure change event
fileInput.click();
};
// Change the style to make it invisible
fileInput.style.opacity = '0';
}
Ich teste dies in Firefox 134.0 unter Ubuntu 22.04.
Bearbeiten
Ich habe vergessen hinzuzufügen, dass die Suche hier Hinweise auf zwei Hauptgründe gibt, die die Ursache dafür sein könnten:
- Änderungsereignis wird nicht ausgelöst weil eine identische Datei ausgewählt wird, wie es der Fall ist hier, oder
- Element wird gelöscht, daher sollte appendChild eingefügt werden, um sicherzustellen, dass das Element dauerhaft ist, wie hier