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

Question

I am wondering if anyone knows how to solve this problem. I use jquery ui tabs and each tab that I have is ajax enabled with caching disabled. Therefore, every time a tab is loaded, it should load all the content again.

He does this, but I don’t like it, first he displays the old version first when he tries to download new content.

So say if I do this

Click on the “A” tab to download. Then I click on Tab B and it loads. Then I press Tab Tab again and I see the previous download for the first time. As a user, I want to click on a button in Tab A so that I can do it, but the fact is that he is trying to load Tab A again (since it is not included in the caching). Therefore, when the user clicks the button, nothing will happen, and suddenly the tab will refresh, as it received the whole new ajax request from the moment the download was completed.

So, is there a way when the user clicks the “A” tab a second time, when he does not see the old version or something else before its completion.

thank

Edit

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

Answer 1

select, .

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

, .

- : (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

select ui.panel . ():

$('#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

});

:

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

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