I have an Export button on my page that is creating a PDF (this part is working). During the export process I would like to disable some input or show an overlay to block the user to modify the page. I'm using the code below:
function RenderSelectedChartJsToPDF() {
// Option 1
$('.featureInput').attr("disabled", true);
$("#fileName").attr("disabled", true);
$("#pdfExport").attr("disabled", true);
// Option 2
$("#overlay").show();
window.jsPDF = window.jspdf.jsPDF;
const pdf = new jsPDF('portrait', 'mm', 'a4', true); //portrait or landscape
var currentTopPosition = topMargin; // Initialisation of the working position.
RenderPDFHeader(pdf, currentTopPosition);
RenderPDFGeneralData(pdf, currentTopPosition);
RenderPDFFooter(pdf, footerHight, 1, pdf.internal.pageCount);
pdf.save($("#fileName").val() + '.pdf');
// Re-enable input here
}
The issue is that when I click the export button the PDF will be render and at the end (when the download starts) then the inputs will be disabled. I would like the input to be disabled first then start to build the PDF.
What am I doing wrong?
As mentioned by @PeterKrebs the issue seems to be the PDF library blocking the browser. I used a setTimeout function to solve my issue as follow:
function RenderSelectedChartJsToPDF() {
$('.featureInput').attr("disabled", true);
$("#fileName").attr("disabled", true);
$("#pdfExport").attr("disabled", true);
setTimeout(() => { RenderPDF(); }, 1000);
}
function RenderPDF() {
window.jsPDF = window.jspdf.jsPDF;
const pdf = new jsPDF('portrait', 'mm', 'a4', true); //portrait or landscape
var currentTopPosition = topMargin; // Initialisation of the working position.
RenderPDFHeader(pdf, currentTopPosition);
RenderPDFGeneralData(pdf, currentTopPosition);
RenderPDFFooter(pdf, footerHight, 1, pdf.internal.pageCount);
pdf.save($("#fileName").val() + '.pdf');
// Re-enable input here
}