I'm implementing a feature where the user can open a new tab to continue using the system while the current tab is busy making a request to the server.
To achieve this, I am trying to utilize $(window).load() or $(window.document).ready() to automatically click on an element once it's ready. However, during testing with a substantial server request, the window only loads after the ajax request completes and the success function finishes executing, despite being asynchronous.
I would appreciate any insights into why this behavior is occurring.
g_SearchHandler.SearchPleaseWait(true);displayNewTab() which opens the new tab.
Snippet 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);
// Keep attempting to click on elements once they become available
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);
}
});