beforeload event in tab widget
I have a seemingly common situation where each tab performs an AJAX request to load in data into the tab panel. I am also using the cookie utility to remember the last selected tab. I want to display a "Loading..." message in the ui.panel element, which is easily accomplished via the "select" event, but only when a tab is clicked on:
select: function(e, ui){
$(ui.panel).html("<p>Loading...</p>");
}
$(ui.panel).html("<p>Loading...</p>");
}
However, if the selected tab happens to fire an AJAX request when the page first loads, there is no intuitive way to perform pre-load logic with access to the ui hash. The "select" event does not fire. I cannot tap into $.ajax's beforeSend because the ui object is not available here. An API where you could fire pre-load logic would be even more useful for long-running AJAX requests.
It would be nice if either A) the select event is fired when the page loads and a tab isn't explicitly clicked on, or B) a beforeload event is added, making this syntax possible:
function callback( e, ui ){
$(ui.panel).html('<p>Loading...</p>');
}
$("#tabs").tabs({
select: callback,
// fires before an AJAX request is sent to
// populate the tab panel.
beforeload: callback
});
$(ui.panel).html('<p>Loading...</p>');
}
$("#tabs").tabs({
select: callback,
// fires before an AJAX request is sent to
// populate the tab panel.
beforeload: callback
});
Thoughts?
Topic Participants
eric
scott.gonzalez
mbuevans