jQuery document ready function is overwritten by _layout.cshtml

Question

In my MVC porogram, I have index.cshtml including _layout.cshtml:

In _layout.cshtml, I have an information display:

<div id='pageTheme'> Operations Overview </div>

Which is in a header bar for displaying information related to the page. In document ready function, I have a button click function, which routes to a new page from MVC controller and in the function I have

$(“#pageTheme”).text(“Hello Kitty”);

When the button is clicked and the document ready function is executed, a new routed page shows up, I can see “Hello Kitty” showing up and then back to “Operations Overview”. I thought the document ready function is executed after loading the new page, not going back to the page again. What did I do wrong?

The following is the details of the document ready function:

 $(document).ready(function () {
        // Click main / sub menu
        $("#nav  li  a").on("click", function () {
            $("#nav li").removeClass("menuActive");
            $(this).parents(".topMenu").addClass("menuActive");
            var mainMenuTitle = $(this).parents(".topMenu").children('a').text();
            $("#pageTheme").text(mainMenuTitle);
        });
    });

The following is the mainMenu, which is inside of _layout.cshtml

<ul id="nav">
            <li class="topMenu"><a class="topMenuA" href='@Url.Action("Index", "SavedViews")'>Saved Views</a></li>
            <li class="topMenu"><a class="topMenuA" > Administration</a> 
                <ul class="subnav">
                    <li class="subMenu"> <a href=@Url.Action("Index", "ServerLogs")>Server Logs</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("Index", "DirSet")>Directory Setting</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("Index", "Site")>Locations</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("Index", "AccessPoint")>Wi-Fi Access Point</a></li> 

                    <li class="subMenu"> <a href=@Url.Action("Index", "ServerLogs")>TIS Server Logs</a></li> 

                    <li class="subMenu"> <a href=@Url.Action("Index", "SoftwareBaseLine")>Software Baselines</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("Index", "Car")> Cars</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("CarSeries", "Car")>Car Series</a></li> 
                    <!--We need a better way to handle the hiding and showing of functionality across projects-->
                    @if (Global.CompanyName == "Port Authority Transit Corporation")  // Video is for WMATA only
                    {
                    <li class="subMenu"> <a href=@Url.Action("Index", "ManagePassword")>Maintenance Password</a></li> 
                    }
                </ul>
            </li>
            <li class="topMenu"><a class="topMenuA" href=@Url.Action("Index", "JobManage")>Job Management</a></li>
</ul>

When submenu is clicked, it executes the routing: let's say:

href='@Url.Action("Index", "SavedViews")

Which is the index of Controller SavedViews. The following is the controller cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

    namespace Fleet.Controllers
    {
        public class SavedViewsController : Controller
        {  
            public ActionResult Index()
            {
                return View();
            }
        }
    }

The following is index.chtml:

@model string
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Saved view for testing now</h2>

<LINK href="~/Content/css/SoftwareVersionPage.css" rel="stylesheet">  
@Scripts.Render("~/bundles/tableFilter")   
@Scripts.Render("~/bundles/jsonTable") 
@Styles.Render("~/Content/Filtercss")
<script type="text/javascript" src="~/Content/js/softwareVersion.js"></script>
<script type="text/javascript" src="~/Content/js/jquery.dataTables.js"></script>


<div class="outerDivBody">  
    <div id="filterMenu">
        @Html.Partial("_FilterMenu")    
    </div>
    <div id="displayNoTitle">
        <p id="showNOofItems"> </p>
    </div>
    <div id="middleOuterDiv">
        <div id="filterDiv" class="halignDiv">
            <div class="filterTopRow"> </div>
            <div class="filterContent"></div>

            <p> Search </p>
            <div id="div_filterSearch">   
                <div>
                </div>     
            </div> 
        </div>
        <div id="MiddleRightSoftDiv" class="softwareVersionDiv">               
        </div>    
    </div>   
</div>

_layout.cshtml:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - Quester Tangent FleetWise</title>

        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)

        @if (IsSectionDefined("AddFilesToHead"))
        {
            @RenderSection("AddFilesToHead", required: false)
        }
    </head>
    <body>
        <header>
            <div class="header">
                <div id="headerstrip">&nbsp;</div>
                <div id="headerstrip1">&nbsp;</div>
                <div  id="infoStrip">
                    <section id="pageTheme">
                        Operations Overview
                    </section>
                    <section id="ws_stat">   Disconnected   </section>                     
                </div>
                <div id ="companyLogo">
                    <A href="@Global.CompanyURL">
                        <IMG title="@Global.CompanyName" id="logo"  alt="@Global.CompanyName"  src="@Url.Content("~/Content/img/")@Global.CompanyLogoFile"  > 
                    </A>
                </div>

                <div id="pageTitle"> </div>

                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                         @if (Session["MyMenu"] == null){
                            Session["MyMenu"] = Html.Partial("~/Views/Shared/_MainMenu.cshtml");
                          } 
                         @Session["MyMenu"]
                    </nav>
                </div>

            </div>
        </header>

        <div id="body"  class="content-wrapper">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>

    </body>
    @if (IsSectionDefined("AddPageScriptToFooter"))
    {
        @RenderSection("AddPageScriptToFooter", required: false)
    }
</html>

Answer 1

Since you have a value in your href it goes and fetches that page. What you are seeing is the javascript code run before the browser gets a response back from the server. So what happens is... the js change take affect then the new pages loads wiping out anything from the previous page.

You can stop this by padding in the event object and calling preventDefault...

$("#nav  li  a").on("click", function (e) {
  e.preventDefault();
  ...//rest of your code...
});

I am guessing that you want to link to function normally since you are giving a value in the href attribute? If that is case you can easily change the "pageTheme" text when the server renders the page.

In the view that calls your layout you can set the value into the ViewBag...

@{
    ViewBag.Title = "Index"; //Or what ever view you are in...
    ViewBag.PageTheme = "Hello Kitty"; // Or what ever theme you want for the particular view
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Then in your layout you can change it to...

<section id="pageTheme">
    @ViewBag.PageTheme
</section>

Or the other option would be to add javascript so when the page loads the script would change it to the value you wanted for the page was just loaded. But I would strongly urge you do it on the server side.

Hope this helps unless there is something I am completely missing?...