.ajax() method gives deprecated warning in console

Question

I'm currently using .ajax() instead of .load() thinking it would change the deprecated warning but the issue still persists. Is there a way to manage this so that it does not appear?

Here's the js file that currently runs the function when a div with the id is clicked.

$('.nav-tab').on('click', function() {

    // Select Page //
    var getPageID = $(this).attr('id') + "-page";
    var bodyChildID = $('div.page').attr('id');
    var pageHTML = getPageID + '-data.html';

    // Determine To Call New Page //
    if(getPageID === bodyChildID) {
        console.log('This is already the current page!');
    } else {
        console.log('Trigger Cover');
        $('div.page-wrapper').empty();

        $.ajax({
            url: pageHTML,
            context: document.body,
            success: function(response){
                $('div.page-wrapper').html(response);
            }
        });


        // $('div.page-wrapper').load(pageHTML);
        console.log('Trigger Uncover');
    }
});

Everything works perfectly at the moment, it's simply just this warning pops up in yellow in the console every time the else statement is called when a div.nav-tab is clicked.

Warning console prints in Google Chrome:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

I've read the link it gives but none of it makes sense to me.

[Solution] Synchronous XMLHttpRequest warning and <script>

Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/209484/discussion-on-question-by-christian-nguyen-ajax-method-gives-deprecated-warni). — Samuel Liew, Mar 11 '20 at 23:31

score 0 · Answer 1 · answered Mar 12 '20 at 18:43

The code you've provided will not, by itself, have that effect.

Somewhere you have a call to ajaxSetup to set some default settings for all jQuery ajax requests.

One of the options you are setting will be async: false. It is that which triggers the deprecated behaviour on the underlying XHR object.

.ajax() method gives deprecated warning in console

1 Answers1