On-Click: Disable and modify text of button inside DataTables

Question

The functionality I am seeking is as follows:

User clicks button that sits inside a DataTable
The button disables and its text changes from 'Manage' to an animated icon from the Font Awesome range of images.
Ajax request is sent and on success a modal pops up with a new dialogue.
The button reverts to it's original form.

Steps 1 and 3 are working fine, it is 2 and 4 that is giving me some issues. I recognise I need to use delegated event handlers to modify the specific button in the DataTable, at the moment there is no change on the page. It should be noted that the site uses Bootstrap.

Here is the column from the DataTable with my button:

 "columns": [
        ...
        {
            "width": "8%",
            "searchable": false,
            "className": "customStyling",
            "render": function () {
                return '<button style="width: 75px" class="btn btn-primary">Manage</button>';
            }
        }
    ]

My onclick event:

$('#myTable tbody').on('click', 'button', function (e) {
    // disable button & change text
    $(this).prop("disabled",true);
    $(this).text('<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>');

    // get data from the relevant row
    var row = myTable.row($(this).closest('tr'));
    var data = row.data();

    ... AJAX REQUEST ...
    ... MODAL APPEARS ...

    // enable button, change text back
    $(this).prop("disabled", false);
    $(this).text('Manage');
});

Any assistance is much appreciated.

as a remark: replace $(this).text('<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>')t to $(this).html('<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>')l in your 2 step — diavolic
– diavolic, Commented Sep 6, 2017 at 4:11

Ananthakrishnan Baji · Accepted Answer · 2017-09-06 04:51:36Z

1

"this" is not available inside success callback so $(this).prop("disabled", false); will not work, "this" must be saved to a variable before sending ajax, check the snippet (its a test ajax api, response is fast)

$('button').click(function(){
//save "this" to a variable button
var button = this;
$(button).html('<i class="fa fa-circle-o-notch fa-spin"></i>');
$.ajax({
url:'https://jsonplaceholder.typicode.com/photos',
success:function(data){
   $(button).html('Manage');
}
});

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button>Manage</button>

edited Sep 6, 2017 at 4:51

answered Sep 6, 2017 at 4:27

Ananthakrishnan Baji

1,2901 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rjmd Over a year ago

I see I didn't make that clear. In the full code, those last two lines sit inside the success and the error callbacks, I just removed the AJAX for now to reduce unnecessary code for this problem.

Ananthakrishnan Baji Over a year ago

$(this).text escapes html characters, plz use $(this).html instead, @Alive to Die mentioned this, i think his answer is your solution

Ananthakrishnan Baji Over a year ago

Understood the problem, it is because you are using "this" inside the success callback, check my edited answer

rjmd Over a year ago

this is my issue, turns out I should of included the AJAX code @Ananthakrishnan Baji

Collectives™ on Stack Overflow

On-Click: Disable and modify text of button inside DataTables

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related