Preventing Double Clicks in an AJAX Button: A Detailed Explanation

by

When working with web applications, it’s crucial to manage user interactions effectively, especially when dealing with asynchronous operations like AJAX requests. One common issue is handling double clicks on buttons, which can lead to multiple, unnecessary requests. In this blog post, we’ll walk through a solution to prevent double clicks on a button that triggers an AJAX call, using a simple HTML and JavaScript example.

HTML Structure

Here’s the basic HTML structure for our web page:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>AJAX</title>
</head>
<body>
    <h1>Learn AJAX</h1>
    <div id="output"></div>
    <button id="loadNew">Load</button>
    
    <script type="text/javascript">
        var output = document.getElementById('output');
        var buttonClick = document.getElementById('loadNew')
        buttonClick.addEventListener('click',function(){
            loadAjax();
        })
        function loadAjax(){
        var ajax = new XMLHttpRequest();
        ajax.onreadystatechange = function(){
            if(ajax.readyState == 4 && ajax.status==200){
                var json = JSON.parse(ajax.responseText);
                var data = json.results[0];
                var message = '<h2>'+data.name.first + '  ' + data.name.last + '</h2><img src="'+data.picture.large +'">';
                output.innerHTML = message;
            }
        }
        ajax.open('GET','https://randomuser.me/api/',true)
        ajax.send();
        }
        
    </script>
</body>
</html>

Preventing Double Clicks

To prevent the button from being clicked multiple times, we’ll disable the button immediately after it is clicked and re-enable it after the AJAX call is complete. Here’s how you can modify the script to achieve this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>AJAX</title>
</head>
<body>
    <h1>Learn AJAX</h1>
    <div id="output"></div>
    <button id="loadNew">Load</button>
    
    <script type="text/javascript">
        var output = document.getElementById('output');
        var buttonClick = document.getElementById('loadNew');
        
        buttonClick.addEventListener('click', function() {
            if (!buttonClick.disabled) {
                loadAjax();
            }
        });

        function loadAjax() {
            // Disable the button to prevent multiple clicks
            buttonClick.disabled = true;

            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange = function() {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    var json = JSON.parse(ajax.responseText);
                    var data = json.results[0];
                    var message = '<h2>' + data.name.first + ' ' + data.name.last + '</h2><img src="' + data.picture.large + '">';
                    output.innerHTML = message;

                    // Re-enable the button after the request is complete
                    buttonClick.disabled = false;
                }
            }

            ajax.open('GET', 'https://randomuser.me/api/', true);
            ajax.send();
        }
    </script>
</body>
</html>

Explanation

  1. Event Listener Modification:buttonClick.addEventListener('click', function() { if (!buttonClick.disabled) { loadAjax(); } }); We add a condition to check if the button is not disabled before calling the loadAjax function.
  2. Disable the Button:function loadAjax() { buttonClick.disabled = true; // Rest of the function... } Inside the loadAjax function, we disable the button as soon as it’s clicked to prevent any further clicks.
  3. Re-enable the Button:jif (ajax.readyState == 4 && ajax.status == 200) { // Update the output... buttonClick.disabled = false; } Once the AJAX call is complete and the data is successfully loaded, we re-enable the button.

Testing the Script

To test the script:

  1. Open the HTML file in a web browser.
  2. Click the “Load” button to trigger the AJAX request.
  3. Observe that the button is disabled immediately after being clicked and re-enabled once the data is loaded and displayed.

Conclusion

By disabling the button during the AJAX request, we can prevent multiple clicks and avoid unnecessary duplicate requests. This simple yet effective technique enhances the user experience and ensures our application behaves as expected.