JSFiddle - React, Tailwind, and code Playground
HTML
<div id="actions">
<button class="update add">+1</button>
<button class="update subtract">-1</button>
<button class="update delete">Delete</button>
</div>
JavaScript
$(function() {
$("#actions").on("click", ".update", function() {
var $this = $(this);
var label = $this.text();
$this.siblings().prop("disabled", true);
$this.text("Please wait...");
//Ajax call
$.ajax({
method: "POST", // or whatever fits
url: "/echo/html/", // your url
data: { method: "methodName" } // whatever data
}).done(function( data ) {
//do stuff with returned data
//Enable the controls
// --- timeout is ONLY for the demo --
setTimeout(function() {
$this.siblings().prop("disabled", false);
$this.text(label);
}, 3000);
}).fail(function() {
//Handler error related stuff
alert( "There was an error!" );
//Enable the controls
$this.siblings().prop("disabled", false);
});
});
});