[RESOLVED]ASP. NET c# and Jquery – value of selected item is gone after maincontent is filled

I have the following problem. When I select an item <li> which references to the ~/About.aspx. Then the value of the selected Item is gone. It is there when I alert the .click function. But it is gone after the document.ready function. Why does it not work
and what do I need to change. I store the value in a hiddenfield. But also this value is being resetted.

Clicking the (about) <li> shows nicely the selected item is 1. But after loading the content into the maincontent the value is gone! What do I need to do. I have searched the entire web but I cannot find a similar problem.

Best regards,
Monty

The code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Monitoring.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server"> 
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder> 
<webopt:BundleReference runat="server" Path="~/Content/css" /> 
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />

</head>
<body>
<form runat="server">
<asp:HiddenField ID="selected_tab" runat="server" />
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework Scripts--%>

<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery"/>
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<asp:ScriptReference path="~/Scripts/jquery-1.8.2.js" />
<%--Site Scripts--%>

</Scripts>
</asp:ScriptManager>

<div id="body">

<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a runat="server" href="~/">your logo here</a>
</p>
</div>
<div class="float-left">
<ul id="menu">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
</div>
</div>

<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>

</div>



<script type="text/javascript">
var selected_tab = 1;




$('#menu > li').click(function () {

selected_tab = $(this).index();
$("form").submit(function () {
$("[id$=selected_tab]").val(selected_tab);
});
});

$(document).ready(function () { alert($("[id$=selected_tab]").val()); });

</script>

</form>

</body>
</html>

you are doing a form submit, which replaces the current page with a new one. no javascript variables will survive this. you can use a hidden field, just be sure the server postback code returns it in the response. 

in your case you using an anchor, not a form post, so the hidden field is not included, because there is no postback. just add it to the link :

<ul id="menu">
<li><a runat="server" href="~/?selected_tab=1">Home</a></li>
<li><a runat="server" href="~/About?selected_tab=2">About</a></li>
<li><a runat="server" href="~/Contact?selected_tab=3">Contact</a></li>
</ul>

just be sure to copy the value to the hidden field server side.

Leave a Reply