The graphic designer of a project I'm building a web site for chose jquery.tools (http://flowplayer.org/tools/tabs/index.html) for a tabs tool in the site. Unfortunately it seems that the tool doesn't
behave properly on a postback in IE7 or IE8 (it does behave properly in FireFox, Chrome and Safari). Does anyone have experience using the jquery.tools with asp.net? and know how to retain the tab index on a postback?
I've tried a lot of things and can't get it to work. The code i'm using now is as follows:
$("ul.tabsScenario").tabs("div.panes > div");
var tabIndex = $('#ctl00_ContentPlaceHolder1_EnInDeToekomst1_HiddenFieldTabIndex').val();
$("ul.tabsScenario").tabs('select', tabIndex);
where the tab index is stored in a hidden field (HiddenFieldTabIndex). The above code works fine in Firefox, Chrome and Safari, but not in IE7 or IE8. I am using a ScriptManager and UpdatePanels, but in an extremely simple website example I can't even get
the jquery.tools tabs tool to work. There are some unanswered posts on the Jquery.Tools forum concerning this topic, but yeah, that doesn't help much.
I've already determined that the jquery.ui tabs tool works well after a postback but that would cost a lot of refactoring in our project as far as html and css goes. I'd like to avoid that. Any help would be appreciated.
Hmm.. Sounds interesting. Barry, I found you asked on flowPlayer forums too but no reply yet. Okay I did some work on this and I have tested my below code in IE, FF, Chrome and Safari. The tabs will maintain their state across postback:
<%@ Page Language="C#" %>
<script type="text/javascript">
</script>
<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="TestProject" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnTest_Click(object sender, EventArgs e)
{
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
Do *not* reference CSS files and images from flowplayer.org when in production
Enjoy!
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css" />
<!-- tab styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />
<!-- tab pane styling -->
<style>
/* tab pane styling */
.panes div
{
display: none;
padding: 15px 10px;
border: 1px solid #999;
border-top: 0;
height: 100px;
font-size: 14px;
background-color: #fff;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<!-- the tabs -->
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>
First tab content. Tab contents are called "panes"</div>
<div>
Second tab content</div>
<div>
Third tab content</div>
</div>
<br />
<input id="hdnSelectedTabIndex" runat="server" type="hidden" />
<br />
<asp:Button ID="btnTest" runat="server" Text="Do PostBack" OnClick="btnTest_Click" />
<script type="text/javascript">
$(function () {
// setup ul.tabs to work as tabs for each div directly under div.panes
var index = 0;
var hdnSelectedTabIndex=$('#<%= hdnSelectedTabIndex.ClientID %>')
var tabIndex = hdnSelectedTabIndex.val();
if (tabIndex != '') {
index = tabIndex;
}
$("ul.tabs").tabs("div.panes > div", {
effect: 'fade',
initialIndex: (index > 0) ? index : 0,
onBeforeClick: function (event, index) {
hdnSelectedTabIndex.val(index);
}
});
});
</script>
</form>
</body>
</html>
Your solution works great. Now the tabs work fine in all browsers.
Just for the record, in my solution, with script manager and within an UpdatePanel and within a UserControl I use the following javascript:
// Get the saved tab index from the hidden field in the UserControl.
var savedTabIndex = 0;
var hiddenField = $('#ctl00_ContentPlaceHolder1_EnInDeToekomst1_HiddenFieldTabIndex');
var currentTabIndex = hiddenField.val();
if (currentTabIndex != '') {
savedTabIndex = currentTabIndex;
}
// Set the tabs. Set the initial index to the saved tab index (or the first tab). Set the event that will save the
// current index to the hidden field on the page.
$("ul.tabsScenario").tabs("div.panes > div", {
initialIndex: (savedTabIndex > 0) ? savedTabIndex : 0,
onBeforeClick: function(event, index) {
hiddenField.val(index);
}
});
I'd like to add something to this post concerning a problem I had deploying this solution to the server. I don't know why, but after deploying to the server, when clicking on another tab for the first time, for example the second tab, on postback the tab
reverted back to the first tab. It seems that a hash in the url ('#') was necessary in order for the tabs to work properly (it was present in the href on the page but IE did not include it in the url; Firefox, Google and Safari did). I changed the code in
the previous post to the following:
// Get the saved tab index from the hidden field in the UserControl.
var savedTabIndex = 0;
var hiddenField = $('#ctl00_ContentPlaceHolder1_EnInDeToekomst1_HiddenFieldTabIndex');
var currentTabIndex = hiddenField.val();
if (currentTabIndex && currentTabIndex != '') {
savedTabIndex = currentTabIndex;
if (currentTabIndex == '0') {
// IE seems to need a hash for the tabs to work properly.
window.location.hash = '#';
}
}
// Set the tabs. Set the initial index to the saved tab index (or the first tab). Set the event that will save the
// current index to the hidden field on the page.
$("ul.tabsScenario").tabs("div.panes > div", {
initialIndex: (savedTabIndex > 0) ? savedTabIndex : 0,
onBeforeClick: function(event, index) {
hiddenField.val(index);
}
});
The currentTabIndex could be '' and it could be undefined since I was hot-swapping usercontrols depending on the situation. If the currentTabIndex was filled and it was '0', then chances were that there was no hash, so I changed the hash to '#'. The tabs then
worked the way they're supposed to under all circumstances, in all browsers.
BarryC
Member
107 Points
56 Posts
Jquery.tools tabs doesn't retain tab index on postback
Sep 06, 2010 05:28 PM|LINK
The graphic designer of a project I'm building a web site for chose jquery.tools (http://flowplayer.org/tools/tabs/index.html) for a tabs tool in the site. Unfortunately it seems that the tool doesn't behave properly on a postback in IE7 or IE8 (it does behave properly in FireFox, Chrome and Safari). Does anyone have experience using the jquery.tools with asp.net? and know how to retain the tab index on a postback?
I've tried a lot of things and can't get it to work. The code i'm using now is as follows:
$("ul.tabsScenario").tabs("div.panes > div");
var tabIndex = $('#ctl00_ContentPlaceHolder1_EnInDeToekomst1_HiddenFieldTabIndex').val();
$("ul.tabsScenario").tabs('select', tabIndex);
where the tab index is stored in a hidden field (HiddenFieldTabIndex). The above code works fine in Firefox, Chrome and Safari, but not in IE7 or IE8. I am using a ScriptManager and UpdatePanels, but in an extremely simple website example I can't even get the jquery.tools tabs tool to work. There are some unanswered posts on the Jquery.Tools forum concerning this topic, but yeah, that doesn't help much.
I've already determined that the jquery.ui tabs tool works well after a postback but that would cost a lot of refactoring in our project as far as html and css goes. I'd like to avoid that. Any help would be appreciated.
jquery.tools asp.net tabs
thuhue
All-Star
15625 Points
3146 Posts
Re: Jquery.tools tabs doesn't retain tab index on postback
Sep 06, 2010 07:11 PM|LINK
maybe it is time to talk to Microsoft and/or jQuery teams?
raghav_khung...
All-Star
32835 Points
5563 Posts
MVP
Re: Jquery.tools tabs doesn't retain tab index on postback
Sep 06, 2010 07:54 PM|LINK
Hmm.. Sounds interesting. Barry, I found you asked on flowPlayer forums too but no reply yet. Okay I did some work on this and I have tested my below code in IE, FF, Chrome and Safari. The tabs will maintain their state across postback:
<%@ Page Language="C#" %> <script type="text/javascript"> </script> <%@ Import Namespace="System.Collections.ObjectModel" %> <%@ Import Namespace="TestProject" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void btnTest_Click(object sender, EventArgs e) { } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- This is a jQuery Tools standalone demo. Feel free to copy/paste. http://flowplayer.org/tools/demos/ Do *not* reference CSS files and images from flowplayer.org when in production Enjoy! --> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script> <!-- standalone page styling (can be removed) --> <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css" /> <!-- tab styling --> <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" /> <!-- tab pane styling --> <style> /* tab pane styling */ .panes div { display: none; padding: 15px 10px; border: 1px solid #999; border-top: 0; height: 100px; font-size: 14px; background-color: #fff; } </style> </head> <body> <form id="form1" runat="server"> <!-- the tabs --> <ul class="tabs"> <li><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ul> <!-- tab "panes" --> <div class="panes"> <div> First tab content. Tab contents are called "panes"</div> <div> Second tab content</div> <div> Third tab content</div> </div> <br /> <input id="hdnSelectedTabIndex" runat="server" type="hidden" /> <br /> <asp:Button ID="btnTest" runat="server" Text="Do PostBack" OnClick="btnTest_Click" /> <script type="text/javascript"> $(function () { // setup ul.tabs to work as tabs for each div directly under div.panes var index = 0; var hdnSelectedTabIndex=$('#<%= hdnSelectedTabIndex.ClientID %>') var tabIndex = hdnSelectedTabIndex.val(); if (tabIndex != '') { index = tabIndex; } $("ul.tabs").tabs("div.panes > div", { effect: 'fade', initialIndex: (index > 0) ? index : 0, onBeforeClick: function (event, index) { hdnSelectedTabIndex.val(index); } }); }); </script> </form> </body> </html>BarryC
Member
107 Points
56 Posts
Re: Jquery.tools tabs doesn't retain tab index on postback
Sep 07, 2010 06:01 AM|LINK
Wow! Thank you, Raghay!
Your solution works great. Now the tabs work fine in all browsers.
Just for the record, in my solution, with script manager and within an UpdatePanel and within a UserControl I use the following javascript:
// Get the saved tab index from the hidden field in the UserControl. var savedTabIndex = 0; var hiddenField = $('#ctl00_ContentPlaceHolder1_EnInDeToekomst1_HiddenFieldTabIndex'); var currentTabIndex = hiddenField.val(); if (currentTabIndex != '') { savedTabIndex = currentTabIndex; } // Set the tabs. Set the initial index to the saved tab index (or the first tab). Set the event that will save the // current index to the hidden field on the page. $("ul.tabsScenario").tabs("div.panes > div", { initialIndex: (savedTabIndex > 0) ? savedTabIndex : 0, onBeforeClick: function(event, index) { hiddenField.val(index); } });BarryC
Member
107 Points
56 Posts
Re: Jquery.tools tabs doesn't retain tab index on postback
Sep 13, 2010 08:37 PM|LINK
I'd like to add something to this post concerning a problem I had deploying this solution to the server. I don't know why, but after deploying to the server, when clicking on another tab for the first time, for example the second tab, on postback the tab reverted back to the first tab. It seems that a hash in the url ('#') was necessary in order for the tabs to work properly (it was present in the href on the page but IE did not include it in the url; Firefox, Google and Safari did). I changed the code in the previous post to the following:
// Get the saved tab index from the hidden field in the UserControl. var savedTabIndex = 0; var hiddenField = $('#ctl00_ContentPlaceHolder1_EnInDeToekomst1_HiddenFieldTabIndex'); var currentTabIndex = hiddenField.val(); if (currentTabIndex && currentTabIndex != '') { savedTabIndex = currentTabIndex; if (currentTabIndex == '0') { // IE seems to need a hash for the tabs to work properly. window.location.hash = '#'; } } // Set the tabs. Set the initial index to the saved tab index (or the first tab). Set the event that will save the // current index to the hidden field on the page. $("ul.tabsScenario").tabs("div.panes > div", { initialIndex: (savedTabIndex > 0) ? savedTabIndex : 0, onBeforeClick: function(event, index) { hiddenField.val(index); } });The currentTabIndex could be '' and it could be undefined since I was hot-swapping usercontrols depending on the situation. If the currentTabIndex was filled and it was '0', then chances were that there was no hash, so I changed the hash to '#'. The tabs then worked the way they're supposed to under all circumstances, in all browsers.