So lösen Sie ein Javascript-Änderungsereignis auf einer versteckten Dateieingabeschaltfläche ausHTML

HTML-Programmierer
Guest
 So lösen Sie ein Javascript-Änderungsereignis auf einer versteckten Dateieingabeschaltfläche aus

Post by Guest »

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

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';

}
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:
  • Ä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
In meinem Fall bleibt das Problem bestehen, auch wenn die Eingabeschaltfläche zum ersten Mal geklickt wird, und ich habe tatsächlich bereits versucht, appendChil hinzuzufügen, aber ohne Erfolg.

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post