is there anyway to clear the content before loading ajax tab in jquery ui

Question

jquery ui tabs supports loading content through ajax here but if i have already loaded previous content and i click on it again, it stays on the old content until the new content is fully loaded

is there anyway to clear the content right when you click the tab so its clear that a new set of content is loading. I see there is a load event but this fires after the new content is loaded. i need a beforeload event or something like that

any suggestions?

Answer 1

You can use the select event, check if it is an AJAX tab, and if so stick "Loading..." or whatever message you want in the panel you just selected, like this:

$("#tabs").tabs({
   select: function(event, ui) {
       if($.data(ui.tab, 'load.tabs')) {
           $(ui.panel).html("Loading...");
       }
   }
});

You can view a demo showing it in action here.