Question

I need to use jquery tabs in my asp.net website with ajax mode to load data in HTML partials form.I will have 4 tabs with different data sources.I need to load data into a tab only when a user clicks on that particular tab,in HTML partials using ajax mode.I have been googling to find an example on this.I am new to jquery and asp.net.Could someone please help me with sample code or example to do this?

Thanks in advance.

Answer 1

The jQuery-UI Documentation has a specific demonstration on this very issue.

Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say “Loading…”, then returns to the normal label once loaded.

Which, when used looks like this (note the href values of each link):

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="ajax/content1.html">Ajax Tab 1</a></li>
    <li><a href="ajax/content2.html">Ajax Tab 2</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu...tristique tempus lectus.</p>
  </div>
</div>