Thanks Klaus - worked perfectly.
On Nov 23, 9:34 pm, Klaus Hartl <[EMAIL PROTECTED]> wrote:
> 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- Hide quoted text -
>
> - Show quoted text -
