Bootstrap button spinner for a table row update

A Bootstrap table row update button with a spinner. The button has a spinner loader whilst an Ajax call completes to determine the status text and colour.

CodePen link.

Button on click

Start with an on click event function for the update buttons. Then define the button, the rows id and the status text. This is done by using closest() and find() on the row that the button was clicked in

$(".update-btn").on("click", function() {
            let btn = $(this); //The button that was clicked
            let id = btn.closest("tr").find(".row-id").text(); //The rows id
            let status_text = btn.closest("tr").find(".row-status"); //The rows status text

Button spinner

Add the spinner span element to the button using html(). Remove the text colour classes and set the status text to ‘……’

btn.html('<span class="spinner-border spinner-border-sm" role="status"></span>'); //Add spinner to button

status_text.removeClass("text-success text-danger"); //Remove status text colors
status_text.text('......'); //Make status text ......

Getting response

This is just a mock-up Ajax GET request to simulate a request with a status code returned. Here the second row will return a response code of 400…

let status_code;
if (id === 'K6xIEAO0BbdA') {
    status_code = 400;
} else {
    status_code = 200;
}

The important parts are setting the status text and then adding a class to determine its colour.

$.ajax({
            url: "https://api.srv3r.com/status/index.php",
            data: {
                "status": status_code,
                "id": id
            },
            type: 'GET',
            complete: function(xhr) {

                    if (xhr.status === 200) {
                        status_text.text('ONLINE'); //Make status text ONLINE
                        status_text.addClass("text-success"); //Green color class for text
                    } else {
                        status_text.text('OFFLINE'); //Make status text OFFLINE
                        status_text.addClass("text-danger"); //Red color class for text
                    }

Notice that this is all done upon the call being complete rather than on success.

Re-instate the button

Finally, remove the spinner span from the button and re-add the “update” text label.

Closeout the complete func, Ajax and button click event.

btn.find('span').remove(); //Remove spinner from button
btn.text('update'); //Re add update text to button
    }
  });
});

The table HTML:

<table class="table table-striped">
    <thead>
        <tr>
            <th>UID</th>
            <th>STATUS</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="row-id">jt4navgbTwPi</th>
            <td class="row-status">unknown</td>
            <td class="text-center">
                <button type="button" class="btn btn-primary btn-sm update-btn">update</button>
            </td>
        </tr>
        <tr>
            <th class="row-id">K6xIEAO0BbdA</th>
            <td class="row-status">unknown</td>
            <td class="text-center">
                <button type="button" class="btn btn-primary btn-sm update-btn">update</button>
            </td>
        </tr>
        <tr>
            <th class="row-id">4RZ57KmwwT9d</th>
            <td class="row-status">unknown</td>
            <td class="text-center">
                <button type="button" class="btn btn-primary btn-sm update-btn">update</button>
            </td>
        </tr>
        <tr>
            <th class="row-id">7iK7VUjkEzP1</th>
            <td class="row-status">unknown</td>
            <td class="text-center">
                <button type="button" class="btn btn-primary btn-sm update-btn">update</button>
            </td>
        </tr>
    </tbody>
</table>