On 23 Nov., 12:39, sukhminder <[EMAIL PROTECTED]> wrote:
> Tabs are not loading on the first click. I have a link which is like:
>
> <li class="news"><a href="javascript:loadTabs('news')">Headlines</a></
> li>
>
> when user clicks on this it calls the following function:
>
> <script>
> function loadTabs(filename) {
> $('head').append('<link type="text/css" href="'+ webroot + 'css/
> ui.tabs.css" rel="stylesheet" />');
> $.getScript(webroot + "script/ui.tabs.js");
> $.get(webroot + "html/"+filename+".htm", function(data){
> $("#cbody").html(""+data+"");
> $("#newscontainer ul").tabs({ remote: true, fxSlide: true,
> fxFade:
> true, fxSpeed: 'normal' });
> });}
>
> </script>
>
> this function loads the required css and javascript tabs file to
> display tabs; but when I click on it it gives me the following error:
>
> $("#newscontainer ul").tabs is not a function
> [Break on this error] $("#newscontainer ul").tabs({ remote: true,
> fxSlide: true, fxFade: true, fxSpe...
>
> However, it does work when I click on the link again. Any idea why
> this is happening? This wasn't happening on my dev server. Here is the
> link to the actual site:http://www.ranglapunjab.net/
>
> Thanks in advance.
My guess is this is due to asynchronous loading. When clicking first
time ui.tabs.js gets loaded but when executing the tabs() method on
the next line the browser is still loading the file. Second time you
click it has been loaded, thus no error any longer.
Try to call tabs in the callback of the getScript method:
$.getScript(webroot + "script/ui.tabs.js", function() {
$("#newscontainer ul").tabs({ remote: true, fxSlide: true, fxFade:
true, fxSpeed: 'normal' });
});
--Klaus
