Umbraco active item in navbar doesn't work

Question

I have currently been working on an application, and i found the active status of the selected view in the navbar to be important: design wise.

Yet i have not managed to get it to work, i am currently trying to run my script from my main.js, if i run it on my view it says

Uncaught ReferenceError: $ is not defined at (index):69

It feels like either my script does not work, or my script doesn't run at all, i cannot tell which one it is

Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light bd-navbar">
    <div class="container">
        <a class="navbar-brand" href="/default.aspx"><img src="@Model.Content.Icon.GetCropUrl("brandLogo")" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto w-100 justify-content-end">
                <li class="nav-item dropdown">
                    <a class="nav-link active" href="@Model.Content.Url" aria-haspopup="true" aria-expanded="false">
                        @Model.Content.Name
                    </a>
                </li>

                @foreach (var item in Model.Content.Children)
                {
                    if (item.Children.Any() && !item.Name.Equals("Protected"))
                    {
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                @item.Name
                            </a>
                            <ul class="dropdown-menu">

                                @foreach (var page in item.Children)
                                {
                                    if (Umbraco.MemberHasAccess(item.Path))
                                    {
                                        <li>
                                            <a class="dropdown-item" href="@page.Url" aria-haspopup="true" aria-expanded="false">@page.Name</a>
                                        </li>
                                    }
                                }

                            </ul>
                        </li>
                    }
                    else
                    {
                        if (Umbraco.MemberHasAccess(item.Path) && !item.Name.Equals("Protected"))
                        {
                            <li class="nav-item">
                                <a class="nav-link" href="@item.Url" aria-haspopup="true" aria-expanded="false">@item.Name</a>
                            </li>
                        }
                    }
                }
                @if (!Umbraco.MemberIsLoggedOn())
                {
                    <li class="nav-item">
                        <a class="nav-link" href="/protected/login/" aria-haspopup="true" aria-expanded="false">Login</a>
                    </li>
                }
                else
                {
                    <li class="nav-item">
                        @Html.Partial("/Views/Partials/Root/Login/LoginStatus.cshtml")
                    </li>
                }
            </ul>
        </div>
    </div>
</nav>

Script

function navBarActive() {
    $(".nav .nav-link").on("click", function () {
        $(".nav").find(".active").removeClass("active");
        $(this).addClass("active");
    });
}

Master.cshtml

    </footer>
        <script src="~/assets/js/jquery-3.0.0.min.js"></script>
        <script src="~/assets/js/popper.min.js"></script>
        <script src="~/assets/js/bootstrap.min.js"></script>
        <script type="text/javascript" charset="utf8" 
        src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"> 
        </script>
        <script src="~/assets/js/smoothscroll.js"></script>
        <script src="~/assets/js/jquery.appear.js"></script>
        <script src="~/assets/js/main.js"></script>
</body>

score 1 · Answer 1 · answered May 03 '19 at 12:55

1

So this isn't an Umbraco issue, the problem is you're trying to run this script before JQuery is included (assuming it's included at all). If you're using some kind of layout in this view, you could reference JQuery before the body and then have the script run in the view. If you'd prefer to have it in your main.js file, make sure you are referencing that main.js file in your view after you reference JQuery (or in your bundles, if you're bundling your scripts).

If you aren't using JQuery in your project yet, this may help

answered May 03 '19 at 12:55

Tyler Buchanan

96
4

Hi Tyler, thanks for your time, i just added my master.cshtml, should i move jquery script before my body? or how would you do it – Lasse May 03 '19 at 19:25
Yes, I would recommend placing that before the body so that any pages that use that layout have access to JQuery for any Javascript you might include in the DOM. – Tyler Buchanan May 06 '19 at 16:39

Umbraco active item in navbar doesn't work

1 Answers1