locked
How to implement $(document).ready(function() in multiple places RRS feed

  • Question

  • User-94355476 posted

    I'm relatively new to ASP.NET MVC and am confused about how to implement jQuery in multiple places in my app.

    The two pages in question that I'm working with are these:

    • Home / Index.cshtml
    • Shared / _Layout.cshtml

    The latter is effectively the master page of the former.

    I had previously successfully implemented a $(document).ready(function () { within @section Scripts within Index.cshtml.  Now I want to implement a $(document).ready(function () { within _Layout.cshtml.  First I tried adding a @section Scripts but it didn't seem to work.  So I added this directly within the <head> section of _Layout.cshtml:

            <script>
                $(document).ready(function () {
                    alert(1);
    
                });
            </script>

    Unfortunately the alert was never fired and I received this error message:

    ReferenceError: $ is not defined
    $(document).ready(function () {

    What am I doing wrong?  What's the correct way to do this in _Layout.cshtml ?

    Robert

    Friday, June 17, 2016 10:51 PM

Answers

  • User61956409 posted

    Hi RobertW57,

    You could try to put the jQuery code at the end of _Layout.cshtml page

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title - My ASP.NET MVC Application</title>
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            <meta name="viewport" content="width=device-width" />
            @Styles.Render("~/Content/css")
            @Scripts.Render("~/bundles/modernizr")   
              
        </head>
        <body>
            <header>
                <div class="content-wrapper">
                    <div class="float-left">
                        <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                    </div>
                    <div class="float-right">
                        <section id="login">
                            @Html.Partial("_LoginPartial")
                        </section>
                        <nav>
                            <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("About", "About", "Home")</li>
                                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <div id="body">
                @RenderSection("featured", required: false)
                <section class="content-wrapper main-content clear-fix">
                    @RenderBody()
                </section>
            </div>
            <footer>
                <div class="content-wrapper">
                    <div class="float-left">
                        <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                    </div>
                </div>
            </footer>
    
            @Scripts.Render("~/bundles/jquery")
            @RenderSection("scripts", required: false)
        </body>
    </html>
    
    @*put your jQuery code here*@
    <script>
        $(function () {
            alert("hello");
        })
    </script>  
    

    Index page

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <h2>Index</h2>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, June 18, 2016 3:36 AM
  • User-474980206 posted
    Any JavaScript that refers to jQuery ($), must come after the script/bundle include of the jQuery code. While we used to put code in the head, it's more common, and some templates follow, by putting the script at the end for performance. Check you layout, for this, and be sure the scripts section comes after the script includes.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, June 18, 2016 5:28 PM

All replies

  • User61956409 posted

    Hi RobertW57,

    You could try to put the jQuery code at the end of _Layout.cshtml page

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title - My ASP.NET MVC Application</title>
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            <meta name="viewport" content="width=device-width" />
            @Styles.Render("~/Content/css")
            @Scripts.Render("~/bundles/modernizr")   
              
        </head>
        <body>
            <header>
                <div class="content-wrapper">
                    <div class="float-left">
                        <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                    </div>
                    <div class="float-right">
                        <section id="login">
                            @Html.Partial("_LoginPartial")
                        </section>
                        <nav>
                            <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("About", "About", "Home")</li>
                                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <div id="body">
                @RenderSection("featured", required: false)
                <section class="content-wrapper main-content clear-fix">
                    @RenderBody()
                </section>
            </div>
            <footer>
                <div class="content-wrapper">
                    <div class="float-left">
                        <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                    </div>
                </div>
            </footer>
    
            @Scripts.Render("~/bundles/jquery")
            @RenderSection("scripts", required: false)
        </body>
    </html>
    
    @*put your jQuery code here*@
    <script>
        $(function () {
            alert("hello");
        })
    </script>  
    

    Index page

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <h2>Index</h2>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, June 18, 2016 3:36 AM
  • User-474980206 posted
    Any JavaScript that refers to jQuery ($), must come after the script/bundle include of the jQuery code. While we used to put code in the head, it's more common, and some templates follow, by putting the script at the end for performance. Check you layout, for this, and be sure the scripts section comes after the script includes.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, June 18, 2016 5:28 PM
  • User-94355476 posted

    Thank you both for your feedback.  I tried it out and it works great!

    What is very strange is that I was loading TinyMCE the traditional way, via a <script> tag in the <head>.  And it all worked fine.

    But now, after getting your collective feedback, I'm loading it this way: @Scripts.Render("~/Scripts/tinymce/tinymce.min.js")

    I also moved ALL of my Javascript code down to the bottom in the _Layout.cshtml page.

    Much appreciated!

    Monday, June 20, 2016 7:25 PM