Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

46
Vistas
Disabling input is delayed

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?

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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
}
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.