I am using jQuery tabs and an ASP.NET listview to display and edit some information. My problem is that when a user inserts a new record in one of the listview items my jQuery tabs go back to the first tab. Is there a way to keep track of which tab I am on or keep it from resting on post back?
8 Answers
This solution worked for me: Source http://saradesh.com/tajuddin/index.php/keep-the-selected-jquery-tab-active-on-partial-post-back-in-asp-net/
<script type="text/javascript">
var selTab;
$(function () {
var tabs = $("#tabs").tabs({
show: function () {
//get the selected tab index
selTab = $('#tabs').tabs('option', 'selected');
}
});
});
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$("#tabs").tabs({show: function () {
//get the selected tab index on partial postback
selTab = $('#tabs').tabs('option', 'selected');
}, selected: selTab });
}
};
</script>
I am using jquery 3.5.0 and jqueryui 1.12.1 from the cloudflare CDN.
In .NET >= 3.5 you can use the Ids without the <%= hdnSelectedTab.ClientID %> This was needed way back when .net mangled names.
So in your.js the following is working for me:
// .aspx side
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
// in my js file
$("#OpsManage").tabs({
activate: function () {
var selectedTab = $('#OpsManage').tabs('option', 'active');
$("#hdnSelectedTab").val(selectedTab);
},
active: $("#hdnSelectedTab").val()
});
/// ********
This goes a little beyond the OP. However, I had need to maintain tab and scroll:
//aspx side
<asp:HiddenField ID="hdnScrollPosition" runat="server" Value="0" />
// js file (inside ready)
var scroll = $('#hdnScrollPosition').val();
$('html').scrollTop(scroll);
/* maintain scroll across partial postbacks */
$(window).scroll(function (event) {
scroll = $(window).scrollTop();
$('#hdnScrollPosition').val(scroll);
});
Related