Using an AJAX/HTML/JavaScript approach to enable/disable a button for generating reports and then re-enabling it

Question

Using an AJAX/HTML/JavaScript approach to enable/disable a button for generating reports and then re-enabling it

A Spring-MVC controller is used to generate a PDF report when a get request is made. The controller includes headers such as "application/OCTET-STREAM", "Content-Disposition", and "attachment; filename=\"" + filename + "\"" in order to prompt the user for save/open action. The controller writes the generated PDF bytes directly to the response's output stream, returning a null ModelAndView.

The challenge lies in disabling the button responsible for triggering the report request after it has been clicked, and then re-enabling it once the report generation is completed to prevent double clicking.

My initial attempt at using prototype.org's Ajax.Request successfully handles the buttons but fails to deliver the PDF to the client. It seems that further steps need to be taken with the response, but I'm unsure of what to do next. Any suggestions or assistance would be greatly appreciated.

function displayPdf(button_b, pdf_url) {
   button_b.disabled = true;
   new Ajax.Request(pdf_url, {
       asynchronous:true,
       evalScripts:true,
       method:'get',
       onComplete: function(response) {
         button_b.disabled = false;
      },
      onFailure: function() {
          redAlert('crap');
     }
   });
}

javascript ajax web-applications prototypejs

Answer 1

Answer №1

To achieve all the functionalities you desire, considering that a download is necessary, one potential approach could be as follows:

<html>
<head>
    <script>
        function initiateDownload() {
            document.getElementById('downloadBtn').disabled = true;
            document.getElementById('downloadFrame').src = "http://www.ca3.uscourts.gov/opinarch/063575p.pdf";
        }
        function enableButton() {
            document.getElementById('downloadBtn').disabled = false; 
        }
    </script>
</head>
<body>
    <iframe id='downloadFrame' onload='enableButton()'></iframe>
    <button id='downloadBtn' onclick='initiateDownload()'>Download Now</button>
</body>
</html>

In essence, this solution involves directing the file to the iframe rather than using an AJAX request. Upon completion of the PDF loading, the iframe's onload event will trigger, re-enabling the button. It is advisable to utilize proper event listeners instead of the outdated inline ones demonstrated in this example.

Answer 2

To achieve all the functionalities you desire, considering that a download is necessary, one potential approach could be as follows:

<html>
<head>
    <script>
        function initiateDownload() {
            document.getElementById('downloadBtn').disabled = true;
            document.getElementById('downloadFrame').src = "http://www.ca3.uscourts.gov/opinarch/063575p.pdf";
        }
        function enableButton() {
            document.getElementById('downloadBtn').disabled = false; 
        }
    </script>
</head>
<body>
    <iframe id='downloadFrame' onload='enableButton()'></iframe>
    <button id='downloadBtn' onclick='initiateDownload()'>Download Now</button>
</body>
</html>

In essence, this solution involves directing the file to the iframe rather than using an AJAX request. Upon completion of the PDF loading, the iframe's onload event will trigger, re-enabling the button. It is advisable to utilize proper event listeners instead of the outdated inline ones demonstrated in this example.

Answer 3

Answer №2

Maybe you're looking to avoid users from clicking the button multiple times intentionally. One simple solution could be using a setTimeout function to re-enable the button after a certain delay.

Check out this example on how to use the setTimeout() method.

For instance, in your displayPdf function, you can add:

setTimeout("button-b.disabled = false", 4000);

This code snippet will keep the button disabled for 4 seconds after being clicked and then allow it to be clicked again.

Answer 4

Maybe you're looking to avoid users from clicking the button multiple times intentionally. One simple solution could be using a setTimeout function to re-enable the button after a certain delay.

Check out this example on how to use the setTimeout() method.

For instance, in your displayPdf function, you can add:

setTimeout("button-b.disabled = false", 4000);

This code snippet will keep the button disabled for 4 seconds after being clicked and then allow it to be clicked again.

Using an AJAX/HTML/JavaScript approach to enable/disable a button for generating reports and then re-enabling it

Answer №1

Answer №2

Similar questions

When checking if el.text() is equal to "string", it will return false, regardless of the actual content of the element being "string"

Shifting a div element around the webpage and letting it fall into place if it intersects with another div using plain JavaScript

Tips for turning off the auto save password option on browsers for user registration forms

Can you explain the distinction between Array() and [] in Javascript, and when would it be preferable to use one over the other?

Choose all the items that are visible in the list using Angular

What methods can be used to implement client-side validation on a file upload control in ASP.NET to verify if the filename includes special characters?

Trouble encountered when attempting to override styles in Material UI's TableRow

Discovering uncategorized elements using javascript

Premature adjustment of images to window size changes

Getting a user's group name from Azure Active Directory in an Angular application - a step-by-step guide

Having difficulty adding a custom library from a repository into an Ember project as a dependency

Tips for invoking a function to automatically load elements on a jQuery mobile website

Generating meta tags in a web scraping tool within a front-end application using AngularJS

Applying a CSS transition to transform properties excluding rotation effects

Dynamic JavaScript Total Calculation

Leveraging server-side functionality with JavaScript

AngularJS is incapable of detaching forms from objects

Utilizing Vue.js to incorporate the isActive property to the class name within a v-for loop, along with implementing dynamic class names

Obtaining Data from an Array with Reactive Forms in Angular 4

Incorporating ajax and jquery into html: Step-by-step guide