Search jQuery

jQuery Forum

jQuery UI Tabs and Lazy Loading via JavaScript Code

in Using jQuery UI • 10 years ago

Can someone tell me the right way to do the following.

I want to be able to load the content of a tab when that tab is clicked. However, I want to be able to load the content by executing some JavaScript code that fetches the content.

What is the right (or best/preferred) way to specify that when clicked it should execute the following function?

The "href" attribute allows you to specify the id of a div tag that has the contents or a url that it will use AJAX to fetch the contents.

Do I have to use the "select" method and pass it a function that tells it what to do?

Thanks,
MIkey

Replies(12)

Yomodo Mo..

Re: jQuery UI Tabs and Lazy Loading via JavaScript Code

10 years ago

The AJAX example can't help you out?

http://jqueryui.com/demos/tabs/#ajax

Yomodo

thecounto..

Re: jQuery UI Tabs and Lazy Loading via JavaScript Code

10 years ago

That example uses a link to another page to retrieve the contents.

I don't want to link to another page or provide a URL for retrieving the content. I want to execute a function.

Am I missing something?

I am a bit sleep deprived these days....

Kevin B

Re: jQuery UI Tabs and Lazy Loading via JavaScript Code

10 years ago

you can use the select event, it passes an event object and a ui object containing the clicked tab, the panel to be shown, and the index of the clicked tab.

-- Kevin

thecounto..

Re: jQuery UI Tabs and Lazy Loading via JavaScript Code

10 years ago

Yeah, that was the direction I was going in.

$('#tabs').tabs({
      select: function(e, ui) {
            self.loadSelectedTab(ui);
      }
});

And in loadSelectedTab I would look at which tab was selected and then execute the appropriate JavaScript code?

loadSelectedTab: function(ui) {

    switch($(ui.tab).attr("href")) {
        case "#users-tab":
            this.loadUsersTab(ui.panel);
            break;
        case "#errors-tab":
            this.loadErrorsTab(ui.panel);
            break;
        case "#accounts-tab":
            this.loadAccountsTab(ui.panel);
            break;

        default:
            console.log('No such tab...');
    }
}

I was hoping to be able to specify the JavaScript code I want executed within the HTML that defines that tabs. And not have to use the "switch" statement.

Either as an attribute of the anchor tag or somewhere in the div tab that corresponds to the panel for the tab.

Thanks,
Mike

Kevin B

Re: jQuery UI Tabs and Lazy Loading via JavaScript Code

10 years ago

you can use the rel attribute of the anchor tag to contain a path to load,

select: function(e,ui){
$(ui.panel).load($(ui.tab).attr('rel'));
}

however if you have the url to put it in the rel, why not just place it in the href to begin with and use default functionality?

-- Kevin

thecounto..

Re: jQuery UI Tabs and Lazy Loading via JavaScript Code

10 years ago

Because it's not a URL that I have. I want to specify the name of a function to execute that will retrieve the contents.

Yomodo Mo..

Re: jQuery UI Tabs and Lazy Loading via JavaScript Code

10 years ago

I was hoping to be able to specify the JavaScript code I want executed within the HTML that defines that tabs.

I think the HTML page that gets loaded should be able to execute your global JavaScript function, defined elsewhere.

So, at the bottom of the HTML page use something like:

<script ....>
call your global JS function from here.
</script>

Yomodo

thecounto..

Re: Re: jQuery UI Tabs and Lazy Loading via JavaScript Code

10 years ago

That doesn't seem like the best approach.

Besides, I am not going to have a global JS function.

Globals are evil

Yomodo Mo..

Re: jQuery UI Tabs and Lazy Loading via JavaScript Code

10 years ago

True, but you can also put that "global" function inside a namespace, to make it "less" global.

Yomodo

thecounto..

Re: jQuery UI Tabs and Lazy Loading via JavaScript Code

10 years ago

It seems like a round about way of doing things.

The only purpose of the file specified by the URL is to execute a JavaScript function.

Doesn't sit well with me.

Yomodo Mo..

Re: jQuery UI Tabs and Lazy Loading via JavaScript Code

10 years ago

Yeah, I understand what you mean.

I had to conquer many situations with solutions that didn't "feel" right.
But in the end, it did what I (the customer) wanted.

If this method technically works, implement it and put it on your to-do list.

Yomodo