Disable custom button then re-enable after ajax call

Disable custom button then re-enable after ajax call

jamgamjamgam Posts: 9Questions: 3Answers: 0

I've got a button that makes an ajax call and grabs some data. I want to disable the button after clicking and then re-enable it after the ajax call completes. I've got the disable working with this.disable() in the action but can't figure out how to re-enable

If I use this.enable() after the ajax call then the button just re-enables immediately after clicking. this.enable() in the ajax complete doesn't work (guess "this" isn't known in the ajax function)

How do I get this done? Thanks

buttons: [
            "pageLength",
            "colvis",
            {
                text: 'Download',
                className: 'buttontoHide',
                action: function (e, dt, node, config) {
                    this.disable();
                    var data = table.rows({selected: true}).data().toArray();
                    if (data.length < 1 || data == undefined) {
                        table.columns(4).search('Hpg').draw();
                        data = table.rows({filter: 'applied'}).data().toArray();
                    }
                    data2 = {'data': data}
                    $.ajax({
                        'url': url+":"+port+"/download",
                        'type': 'POST',
                        'data': JSON.stringify(data2),
                        'dataType': 'json',
                        'contentType': "application/JSON; charset=UTF-8",
                        'success': function(data) {
                            var w = window.open('download?jobno='+data2.data[0][0]);
                        },
                        'complete': function() {
                        }    
                    })
                }
            }
        ],

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    Have you tried putting the button().enable() into the Ajax's success() or function - something like this:

    buttons: [
                "pageLength",
                "colvis",
                {
                    text: 'Download',
                    className: 'buttontoHide',
                    action: function (e, dt, node, config) {
    
                        that = this; 
    
                        this.disable();
                        var data = table.rows({selected: true}).data().toArray();
                        if (data.length < 1 || data == undefined) {
                            table.columns(4).search('Hpg').draw();
                            data = table.rows({filter: 'applied'}).data().toArray();
                        }
                        data2 = {'data': data}
                        $.ajax({
                            'url': url+":"+port+"/download",
                            'type': 'POST',
                            'data': JSON.stringify(data2),
                            'dataType': 'json',
                            'contentType': "application/JSON; charset=UTF-8",
                            'success': function(data) {
                                var w = window.open('download?jobno='+data2.data[0][0]);
    
                                that.enable();
    
                            },
                            'complete': function() {
                            }    
                        })
                    }
                }
            ],
    

    Colin

This discussion has been closed.