CODEWITHSUNDEEP
javascriptjqueryajax
squaretastic
squaretastic

Reputation: 123

Multiple Ajax calls appear to be treated as synchronous requests when they should not be

I have an Ajax request which changes the content of an input field on success. That input field triggers another series of Ajax requests on change. The code works, but according to the console in Chrome, it is reported that "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience". It appears this error message indicates that synchronous requests are being made.

Here is the code: 

    $.ajax({
        type: 'GET',
        url: '/widgets/test',
        async: true,
        success: function (response) {
            $("#widgetData").val(JSON.stringify(response));
            $("#widgetData").trigger("change");
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log("There was a problem requesting the widget endpoint!");
        }
    });

    $("#widgetData").change(function () {
        var obj = jQuery.parseJSON($("#widgetData").val());
        $.each(obj, function (id, url) {
            $("#mainContent").append("<div class='widget' id='widget" + id + "'></div>");
            $("#widget" + id).load(url);
        });
    });

I intend all of the requests to be asynchronous and believe that what I have written should accomplish that task. Please help me determine what is wrong, and why I am getting the aforementioned error!

Upvotes: 2

Views: 98

Answers (1)

Muhammad Adeel Zahid
Muhammad Adeel Zahid

Reputation: 17784

It appears that your first ajax request is setting async flag to false. You can change that call to following

$.ajax({
        type: 'GET',
        async: true, 
        url: '/widgets/test',
        success: function (response) {
            $("#widgetData").val(JSON.stringify(response));
            $("#widgetData").trigger("change");
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log("There was a problem requesting the widget endpoint!");
        }
    });

This should fix your warning message

Upvotes: 2

Related Questions