JQuery Tabs Question

jazzcatone
jazzcatone used Ask the Experts™
on
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>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jon NormanInformation Systems Manager
Top Expert 2012
Commented:
is this happening as soon as you click the button or when you get the post response back from the server?
RobOwner (Aidellio)
Most Valuable Expert 2015
Commented:
Where is that script segment placed ie in the head or body?

They disappear for either of two obvious reasons:
1. The CSS is no longer available
2. The Js class that defines the tabs ie jquery ui is no longer available

The 2. Can happen if you reinitiate the jquery library.

Really won't know until you can post some of the code. More specifically the generate HTML before and after the postback

Author

Commented:
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>
Commented:
document.ready will not be hit if you use update panels.
The inner content of the update panel refreshes while the document remains ready.
Every time a partial postback occurs you have to re-create the tabs.

Use the client script below in order to make it work.
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function() {
    $('#tabs1').tabs();
});

Open in new window

pageLoaded method of the ASP.NET client framework is kind of the same principle as jquery's document.ready method.

Author

Commented:
It absolutely was within the update panel. That was exactly what I needed. Thank you so much !!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial