Question

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');
  });