using Jquery Tabs in asp.net

Question

Hi everyone, 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>

Answer 2

Thank you so much for the quick responses Jonathan.I replaced the href value,with my aspx page name,it did take me to the aspx page when I click on the tab.But in my aspx page there are a few buttons and some other stuff.when I click on any buttons they r not posting back.I am not sure,what is the problem.Could you please help me with that?

here is the HTML of my page which has all the tabs.

<script src="Javascript/ui/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Javascript/ui/ui.core.js" type="text/javascript"></script>
<script src="Javascript/ui/ui.tabs.js" type="text/javascript"></script>

$(document).ready(function() {

$('#tabs').tabs({

load: function(event, ui) {
    $('a', ui.panel).click(function() {
        $(ui.panel).load(this.href);
        return false;
    });
}

}); });

and the css I am using for the page is as follwoing

*{margin:0; padding:0}
body > #tabs{margin:0 auto; width:800px; margin-top:-24px}
h1{margin:0 auto; padding-top:7px; width:800px; font-weight:normal; }
#header{ height:75px}
img{background:white;  margin:10px 0 10px}

#tabs > ul{display:block}
#tabs > ul li{display:inline; padding:4px; background:blue;}
#tabs > ul li.ui-tabs-selected{background:blue; border:1px solid black}
#tabs > ul a{text-decoration:none; color:white}
#tabs > ul li.ui-tabs-selected a{text-decoration:none; color:black; background:red }
#tabs > div{margin-top:4px}
#tabs > a{color:black}
#tabs > a:hover{text-decoration:none}
.ui-tabs-hide{display:none;}
.ui-tabs-panel{text-align:center; border:1px solid black}

#footer{text-align:center;}
#copy{font-size:.75em; color:#666666}

Here is the content of the body tag.

     <div id="tabs">
    <ul>
        <li><a href="sample.aspx"><span>sample</span></a></li>
        <li><a href="sample1.aspx"><span>sample1</span></a></li>
        <li><a href="sample2.aspx"><span>sample</span></a></li>
        <li><a href="#reports"><span>Reports</span></a></li>
    </ul>              

</div>
</form>