Preventing multiple clicks by toggling the HTML tag on and off

Question

Preventing multiple clicks by toggling the HTML tag on and off

Here is the jQuery structure that I am currently working with:

$(document).on('click', '.view-details', function () {   
    $(this).prop("disabled", true);
    // API call1
    // API call2
    // API call3
    $(this).prop("disabled", false);
}

I implemented the disabling and enabling functionality to prevent multiple clicks by users, as this was causing various issues.

However, a challenge I am facing is that the API calls are Asynchronous, and I wish to avoid making them Synchronous.

The issue arises where Line 5 may execute before the completion of API calls, which is not desirable. Additionally, enabling/disabling on each success or error of APIs seems like a cumbersome task.

Anyone have any suggestions on how to ensure that Line 5 executes only after the successful completion of API calls 2, 3, and 4?

javascript jquery html css

Answer 1

Answer №1

Here is an example of how you could accomplish this:

$.when(apiCall1, apiCall2, apiCall3).done(function(){});

Answer 2

Here is an example of how you could accomplish this:

$.when(apiCall1, apiCall2, apiCall3).done(function(){});

Answer 3

Answer №2

To activate the button once all AJAX calls have been completed, store the deferred objects in an array and use apply with $.when. Follow this example:

$(document).on('click', '.show-details', function () {
    var $element = $(this).prop("disabled", true);
    var ajaxRequests = [];
    ajaxRequests.push(requestA);
    ajaxRequests.push(requestB);
    ajaxRequests.push(requestC);

    $.when.apply(ajaxRequests).done(function() {
        $element.prop("disabled", false);
    });
});

Answer 4

To activate the button once all AJAX calls have been completed, store the deferred objects in an array and use apply with $.when. Follow this example:

$(document).on('click', '.show-details', function () {
    var $element = $(this).prop("disabled", true);
    var ajaxRequests = [];
    ajaxRequests.push(requestA);
    ajaxRequests.push(requestB);
    ajaxRequests.push(requestC);

    $.when.apply(ajaxRequests).done(function() {
        $element.prop("disabled", false);
    });
});

Preventing multiple clicks by toggling the HTML tag on and off

Answer №1

Answer №2

Similar questions

How can I implement an autocomplete feature in Vue.js?

Top-notch java tool for caching and minifying dojo, jquery JavaScript, and CSS files

Move the div by its handle without any nesting involved

assign a goal to hyperlinks

What is the best way to retrieve all records from a MongoDB collection?

Merging two functions for concealing an element

Learn the process of extracting an array of objects by utilizing an interface

Styling Scrollbars in Datatables

Guide on how to modify the CSS styling of a particular <td> element when its parent contains a specific class

Issues arise when the condition fails to function correctly during the process of form

Enhance your WordPress site by implementing infinite scroll with AJAX to seamlessly load more posts

The printing code is not able to interpret the CSS

Tips for showing/hiding textboxes based on select options:

Not all comparisons between two tables are guaranteed to be successful

Avoid data duplication or triplication by implementing a pop-up loop when adding new information

Enhancing MongoDB following a successful transaction with Stripe API

php print some additional php script

What is the maximum amount of information that can be stored in a data attribute within the DOM?

The issue code R10, indicating a boot timeout, has arisen as the web process failed to connect to $PORT within 60 seconds of initiating on Heroku platform

Changing the color of Material UI pagination: a step-by-step guide