Load Ajax Content to Hidden Tab - Instead of Current Tab - ajax

Question

I have a dashboard UI that utilizes a jQuery tabs script. Each tab loads its content via separate Ajax requests.
Here's the issue I'm having:
A user will open multiple tabs, one right after the other
Each tab is created and an Ajax request is made for each
The last tab to be created is currently open and each tab's content is displayed on this tab once the requests are complete
Once a user clicks on any tab, the content is set as it should be.
Basically, if the user opens a new tab ahead of a recent tab's Ajax request completing, both Ajax requested contents display on the current open tab until the user clicks on any tab and then everything is displayed as it should be.
I've tried setting the Ajax calls to async: false which solves the issue as it forces the ajax requests to complete and load on the current tab before allowing the user to open another tab, however the user feedback has been negative in that users think that the dashboard froze (which it has).
I've also set a timeout function to load the tab with a loading .gif and then make the async: false Ajax request. The user feedback as been the same, even with the timeout function as the loading gif stops it's animation once the Ajax request is made.
The Ajax requests looks like this:
$.ajax ({
url: report,
cache: false,
success: function(html) {
$("#loading").hide();
$("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer">'+html+'</div>');
},
error: function(x, status, error) {
$.ajax ({
url: 'admin/error_notification.php',
type: "POST",
data:{
error: error
}
});
},
async:true
});

Answer 1

Keep track of the last request in some way and abort it when creating another request:
var jqxhr = {abort: function () {}};
/* various other code */
function loadTabOrWhatever() {
jqxhr.abort();
jqxhr = $.ajax({
/* ajax call in your question */

Answer 2

I would suggest having a separate tabcontent div that is paired with each tab (not just one #tabcontent div), and show/hide those when switching tabs. Then if a previous ajax call comes back later, and populates a tabcontent div that is now hidden, there's no harm done.
function loadTab(tabName) {
// Hide all tab content panes, then just show the one we want
$(".tab-pane").hide();
$("#tab-" + tabName).show();
$.ajax ({
...
success: function(html) {
$("#loading").hide();
$("#tab-" + tabName).append('<div id="c'+count+'" class="tabContentContainer">'+html+'</div>');
<snip>
Create your content panes like:
<div class="tab-pane" id="tab-firsttab"></div>
And trigger links would be something along the lines of:
First Tab
I believe it would make it harmless then for users to quickly click on multiple tabs, firing off multiple ajax calls, since each ajax call will only load the content into it's own content pane.

Answer 3

I figured out that if I create the tabContentContainer div prior to the Ajax request, then the tab selector has a object to then hide when another tab opens. Then, once the Ajax response is loaded, the visibility of it has already been set. See below:
$("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer"></div>');
$.ajax ({
url: report,
cache: false,
success: function(html) {
$("#loading").hide();
$("#c"+count+"").html(''+html+'');
},
error: function(x, status, error) {
$("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer"><div class="alert alert-error" style="margin-top:70px;"><button type="button" class="close" data-dismiss="alert">×</button><strong>Don\'t worry… It\'s not you, it\'s us.</strong> We were unable to connect to your data and deliver results. We are looking into this now.</div></div>');
$.ajax ({
url: 'admin/error_notification.php',
type: "POST",
data:{
error: error
}
});
},
async:true
});

Answer 4

I have such a setup. You call the function below indicating what tab you're loading into. I make sure each new tab has a unique ID (UUID) and that the function gets that ID to load the page.
There is a snag, however - I have found that if the sub pages loaded contain javascript code, that needs to initialize objects internally to the page,
they may be confused by the fact that the page is 'hidden'. Sometimes when
I get back to the tab with such elements, I would find they have a 'small' size.
This function also store the data submitted to the backend, so that you easily can create a 'reload' button.
function LoadView(ident, view, data) {
var img = $('<img>', {
src : '/images/ajax-loading.gif'
});
$('#' + ident).html(img);
data.view = view;
data.viewid = ident;
// console.log(data);
$.ajax({
url : '/cgi-bin/browser.cgi',
data : data,
type : 'GET',
dataType : 'html',
timeout : 30000000,
success : function(result) {
$("#" + ident).html(result);
// set data on view
$("#" + ident).data('data', data);
},
error : function(xhr, status, error) {
var img = $('<img>', {
src : '/images/exclamation_micro.png'
});
$('#' + ident).html(img.html() + error);
// alert("Error processing request " + error);
},
timeout : function() {
var img = $('<img>', {
src : '/images/exclamation_micro.png'
});
$('#' + ident).html(img.html() + ' Timeout');
// alert("Timeout processing request");
}
});
}
function ReloadView(view, ident) {
// Retrieve the data for the view
var data = $('#' + ident).data('data');
// Reload the view
LoadView(ident, data.view, data);
}