Jquery Tabs- Load Contents only when clicked

Question

Hi,

I am relatively new to jquery and web development.

I am using jquery tabs to create tabs.

But i want the contents to be loaded only when i select a particular tab.

Can someone please help me with this?

Answer 1

UI/Tabs support loading tab content on demand via Ajax, check this example.

Answer 2

Loading content via Ajax adds the complexity of dealing with bookmarking / browser back buttons. Depending on your situation, you should consider loading new content with a full page request. Handling the bookmarking/browser back involves using adding anchor info in the URL.

Also, check out LavaLamp for tab selection. It's pretty nifty looking.

Answer 3

OK, I assume when the user clicks a tab, you intend to fetch content dynamically, via AJAX. This really involves two things, setting an onclick even for your tab and fetching the data via ajax.

Setting an onclick event

Give your tab an class, for example *my_tab*. Let's say that when the user clicks the tab you want the *handle_tab_click()* function to fire. Here's an example of binding the onclick event to your *my_tab* tab:

$(".my_tab").bind("click", handle_tab_click);

Your *handle_tab_click()* function will be given an event argument which will be able to provide you with information on the element that fired the event (in this case, the element with class name *my_tab*).

function (event) {
    if ($(event.target).hasClass("my_tab")) { /* handle tab click */ }
    if ($(event.target).hasClass("my_tab_2")) { /* a different tab click */ }
    if ($(event.target).hasClass("my_tab_3")) { /* ... */ }
}

See the JQuery event documentation for more details here.

Fetching the data via ajax

Fetching data will require you to invoke a remote script while supplying information about which tab was clicked (in order to fetch the appropriate information). In the following snippet, we're invoking the remote script myscript.php, supplying the HTTP GET argument *tab_clicked=my_tab* and calling the function *tab_fetch_cb* when the script returns. The final parameter is the type of data being returned (it's up to you to choose).

$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml")

It's up to you to design myscript.php to handle the *tab_clicked* parameter, fetch the appropriate data and return it (i.e. write it back out to the client).

Here's an example for *tab_fetch_cb*:

function tab_fetch_cb(data, status) {
    // populate your newly opened tab with information 
    // returned from myscript.php here
}

You can read more about the JQuery get function here, and JQuery ajax functions here

I'm sorry I can't be more specific in my examples, but a lot of the processing is really dependant on your task. As it looks as it has already been pointed out, you may look to some JQuery plugins for a canned solution to your problem. That being said, it never hurts to learn how to do this stuff manually w/ JQuery.

Good luck.

Answer 4

Hi,

I tried both wilsonya's and CMS' method and i was successfully able to implement the Ajax call..

Thanks a lot :)