How to remove old content from jquery-ui tabs when clicked?

Question

Hi

I am wondering if anyone knows how to solve this problem. I am using the jquery ui tabs and each tab I have is ajax enabled with caching disabled. So every time the tab loads it should load up all the content again.

It does this but what I don't like is first it displays the old version first while it is trying to load up the new content.

So say if I do this

Click on Tab A it loads up. I then click on Tab B and it loads up. I then click on Tab A again and I see the previous load up of the first time around. As the user I want to click on a button in Tab A so I do that but the thing is that it is trying to load up Tab A again(since it is no caching enabled). So when the user clicks the button nothing will happen and all of a sudden the tab will refresh itself since it has gotten all the new ajax request since it finished loading.

So is there a way when the user clicks Tab A for the second time they don't see the old version or anything till it's finished loading.

Thanks

Edit

 $('#tabs').tabs(
            {
                select: function (event, ui)
                {
                    $('#tabs .ui-tabs-hide').children().remove();
                }
            });

Answer 1

you can take a look at the event select, that is fired if a tab gets clicked.

http://jqueryui.com/demos/tabs/#event-select

There you should be able to remove the old content while the new content gets loaded.

You could try something like this: (untested)

$("#your_tabs_box_id")
  .bind("tabsselect", function(event, ui){
    ui.panel.css('visibility','hidden');
  })
  .bind("tabsload", function(event,ui){
    ui.panel.css('visibility','visible');
  });

Answer 2

A combination of the select event and emptying ui.panel will do it. From the documentation (tabs overview):

$('#example').bind('tabsselect', function(event, ui) {

    // Objects available in the function context:
    ui.tab     // anchor element of the selected (clicked) tab
    ui.panel   // element, that contains the selected/clicked tab contents
    ui.index   // zero-based index of the selected (clicked) tab

});

so:

$(document).ready(function(){
    var $tabs = $("#selector").tabs({ select: function(event, ui) {
                                          $(ui.panel).empty();
                                      }
                               });
});

or:

$('#selector').bind('tabsselect', function(event, ui) {
    $(ui.panel).empty();
});