Like lazy bootable content on jQuery tabs that doesn’t apply to any of the contents of the tab (for example, the login section or the registration section)

Question

I am lazy to load 3 tabs using Query tabs in asp.net mvc web application. I have a Login section (username and password) that I would like to display where the contents of the tab are usually displayed. I would like this login section to load only when the user clicks the link at the top of the page. So, I also needed to boot lazily. How would I do this, I cannot figure it out. Below is my current tab code. I appreciate your help!

<script type="text/javascript"> $(document).ready(function() { $("#tabContainer").tabs(); }); </script> <div id="menu" style=" background-color:White; width:950px; height:400px; float:left;"> <div id="tabContainer"> <ul> <li><a href="../../Home/GetHomeTab">Home</a></li> <li><a href="../../Home/GetProductTab">Products</a></li> <li><a href="../../Home/GetContactUsTab">Contact Us</a></li> </ul> </div> </div> 

Answer 1

ok, you need to add the select: event to your tab code. here's a quick example:

 <div id="menu" style=" background-color:White; width:950px; height:400px; float:left;"> <div id="tabContainer"> <ul> <li><a href="#tab0">Home</a></li> <li><a href="#tab1">Products</a></li> <li><a href="#tab2">Contact Us</a></li> </ul> <div id="tab0"></div> <div id="tab1"></div> <div id="tab2"></div> </div> </div> <script> $(function() { var $tabs = $("#tabContainer").tabs({ select: function(e, ui) { var thistab = ui; runMethod(thistab.index); } }); }); function runMethod(thistab) { selectedtab = thistab; switch (thistab) { case 0: getTab0Data(); break; case 1: getTab1Data(); break; case 2: getTab2Data(); break; } } function getTab0Data(){ alert("you clicked Tab 0"); } function getTab1Data(){ alert("you clicked Tab 1"); } function getTab2Data(){ alert("you clicked Tab 2"); } </script> 

[EDIT] I updated the example so that it starts. both jquery base lib and jQuery UI must be referenced on the page. I also added jsfiddle to demonstrate it in action: http://jsfiddle.net/jimibt/k7ZN6/

basically, the getTab * n * Data () function launches an ajax request that populates the corresponding div (i.e. tab0, tab1, tab2, etc.) in accordance with the above structure.

for jquery ajax see

http://api.jquery.com/jQuery.ajax/

hope this helps