niiknow / vue-datatables-net

Vue jQuery DataTables.net wrapper component
https://niiknow.github.io/vue-datatables-net/
MIT License
171 stars 58 forks source link

Intercept Ajax #4

Closed ruelluna closed 5 years ago

ruelluna commented 5 years ago

Great wrapper! I switched to using this because of Laravel's data integration.

Just one thing though, I tried intercepting the ajax requests because I want to setup a fullscreen loading component and remove after successful draw.

What I tried so far is to use jQuery

  $.ajaxSetup({
        beforeSend: function (xhr,settings) {
            console.log('beforeSend')
        },
        ajaxComplete: function(xhr, settting){
            console.log('ajaxComplete')
        },
        ajaxError: function(){
            console.log('ajaxError')
        },
        ajaxStart: function(){
            console.log('ajaxStart')
        },
        ajaxStop: function(){
            console.log('ajaxStop')
        },
        ajaxSuccess: function(){
            console.log('ajaxSuccess')
        }

    });

Only the beforeSend event is being triggered. I will appreciate some guidance. Thank you for your wrapper!

noogen commented 5 years ago

@ruelluna I believe it's behaving correctly, as you have described, per documentation here: https://api.jquery.com/jquery.ajaxsetup/

To summarize $.ajaxSetup usage doc basically say that it is to setup defaults for $.ajax method. No where in the settings document here https://api.jquery.com/jQuery.ajax/ that said it support those other functions. Also, defaults mean that, the $.ajax method, itself, can override those defaults and prevent those default from being executed. It's use for shortcutting/shorthand $.ajax method call and is not reliable.

If you go to the function documentation, example $.ajaxComplete, it specifically identify itself as a global function that is wired up on the document object, per example on the documentation page. So you can use beforeSend and wire-up events on the document object to solve your ajax complete problem.

Personally, I don't like using global. You can use beforeSend to intercept the before ajax and the table reloaded event ajax complete. Alternatively, you can use the datatables.net native events preXhr and xhr.dt events.

ruelluna commented 5 years ago

Thanks!