Introducing a delay when using Ajax calls with Tabs
All,
I have a scenario where each container generated via ui.tabs need
further enrichment before it's shown to the user. To clarify, when a
user clicks on a tab, the containers data is retrieved via a Ajax call
(.load)...so far so good. The problem is whilst the plug-in renders
the data as HTML, the data is nothing else than a JSONString. This
means that I get unformatted text in my browser. Now I know I can use
the callback method load: to take the content of the container (JSON
data in this scenario) and then format it...but by then the 'raw' data
is already visible in the browser. Even if I 'hide' the container
inside the callback method do I still see it for a split second.
So..what I've done is to add a 'delay' to the tabs object:
// Ajax
spinner: 'Loading…',
cache: false,
idPrefix: 'tab-',
delay: false, // delay rendering of the container, used
when the returned data needs to be formatted first
Then where we 'show' the active container, I added this:
o.delay || this.$containers.slice(o.initial, o.initial +
1).show();
then all I have to do is set it to true:
$('#sample ul').tabs({ remote: true,
load: function(clicked, container){
json = $
(container).text().parseJSON();
...
if (this.delay) {
$(container).show();
}
},
delay: true
});
This allows me to format the data before I 'show' the container.
Now, is there a better way of doing it due to my lack of understanding
as to how the API works? I will be interested to know how other people
does it!
Thanks,
Jaco