Link to home
Start Free TrialLog in
Avatar of Jason Livengood
Jason LivengoodFlag for United States of America

asked on

JQuery Tabs Question

I am brand new to JQuery. I have an asp.net site.I have some <li> tags that are  " JQuery'd" into tabs on Page load. However, when the page posts back when I click a button  the tabs go away and they turn back into <li>'s .

 How do I get the <li> tags to stay tabs when the button is clicked ??? I have a method which runs on Page Load. See below.  Is there a way I can use OnClientClick event of the asp button to get this to work, or what do I need to do . Any help would be most appreciated.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#tabs1').tabs();
    });



</script>
SOLUTION
Avatar of Jon Norman
Jon Norman
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Jason Livengood

ASKER

Thanks for the responses.Behavior happens after the server post back response. Even more complicating is this is actually within a .ascx that sits on a .aspx. Thre tabs method above I listed in my initial message is in the body of the .ascx  

However,after more inspection it does infact appear that the styles are not available after the postback(as tagit suggested).See the source below. How do I get the styles to persist after the postback?

Before PostBack
<div id="tabs1" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#tabs1-1" title="Employee">
<b>Employees</b>
</a>
</li>
<li id="ucDriverRiskLevel1_non" class="ui-state-default ui-corner-top">
<a href="#tabs1-2" title="Non-Employee">Non-Employees</a>
</li>
</ul>

After Postback
<div id="tabs1">
<ul>
<li>
<a href="#tabs1-1" title="Employee">
<b>Employees</b>
</a>
</li>
<li id="ucDriverRiskLevel1_non">
<a href="#tabs1-2" title="Non-Employee">Non-Employees</a>
</li>
</ul>
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
It absolutely was within the update panel. That was exactly what I needed. Thank you so much !!!