event is waiting for ajax call even though async set to true

Question

I'm trying to let the user open a tab to keep letting him use the system while the current tab is making some request to the server.

so I'm opening a new tab and trying to use $(window).load() or $(window.document).ready() to click on some item when the elements are ready. When testing it with a large server request, the window is only loaded when the ajax request returns with the result and finishes the success function even though it should be async. Would love some ideas why it is happening. g_SearchHandler.SearchPleaseWait(true); is calling covering the screen with a waiting gif and calling displayNewTab() that opens a new tab.

code to open new tab:

displayInNewTab: function(){
        try {
            var w = window.open(href = "/prod/php/home.php");
            var loadingFunc = function(){
                var devices = w.document.querySelector(`.sidebar-segment[data-segment-name="DEVICES"]`);
                var selDevice = getSelectedDeviceTreeData();
                if(!selDevice){
                    return;
                }
                var selDeviceObj = w.document.getElementById(selDevice.name);
                //when the window is loaded keep trying until elements are available for clicking.
                if(devices && selDeviceObj){
                    devices.click()
                    w.ClickOnItem(selDevice.name, false, true)
                }else{
                    setTimeout(loadingFunc,1000);
                }
            }
            $(w.document).ready(loadingFunc);
        }catch (e){
            console.error(e)
        }
    }

g_SearchHandler.SearchPleaseWait(true); ajax request:

$.ajax({
        type     : "POST",
        dataType : "json",
        url      : "commands.php",
        data     : params,
        success  : function(objJSON)
        {
            DisplayResults(objJSON);
            g_SearchHandler.SearchPleaseWait(false);
        }
});

user_11952668 · Answer

Apparently it happened because the page took some time to ask the server for the resources, so the server served the ajax request first, and the request for the page resources was in a queue and served after the ajax request was done.

a quick patch was to insert the ajax request into setTimeout() so that the new page will first make a request for the resources and only then the ajax request will be sent.

e.g:

setTimeout(function(){
    $.ajax({
        type     : "POST",
        dataType : "json",
        url      : "commands.php",
        data     : params,
        success  : function(objJSON)
        {
            DisplayResults(objJSON);
            g_SearchHandler.SearchPleaseWait(false);
        }
    })
},5000);

EDIT

I've checked for some better solutions when I realized what the issue is.

two solutions was:

1.fetching the page resources before opening the tab and only then making the ajax request

$.get("/prod/php/home.php")
    .done(function(){
        // open new tab with fetched resources.
        //make ajax call here.
    })

since the php session was locked and that's the thing that caused the issue. in php server side session_write_close(); did the trick.

event is waiting for ajax call even though async set to true

1 Answers