locked
Question - is it possible to use Jquery in partial pages ??? DOES NOT WORK :-( RRS feed

  • Question

  • User-973886032 posted

    Hello guys

    I cant seem to get jquery to work in my partial pages, did a bit of google search and seems others have the same problem. I have a couple of re-usable pages, which I want to use site wide, e.g. a custom login partial page, a custom sign up page, a custom shopping cart etc

    I tried using this test code in my partial page and it does not work (unless I put it in the main page and there are no errors in developer tools)

    any advise ? thank you

    @section scripts // PARTIAL PAGE JQuery
        {
    
        @RenderSection("Scripts", required: false)
        <script>
            alert("HIT0");
            $(document).ready(function () {
                $('#MetToday').click(ehi);
                alert("HIT1");
    
                function ehi(e) {
                    e.preventDefault()
                   alert("HIT2");
                };
            }
    
        </script>
    
    }
    
    
    /// and i am calling my partial page as 
    
    
    @await Html.PartialAsync("/Views/Shared/i-shared/i-EF/_Users.cshtml")

    Monday, May 14, 2018 9:05 AM

Answers

  • User-369506445 posted

    you must change your code below like :

    @{
        ViewData["Title"] = "test";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <h2>test</h2>
    
    @section scripts
    {
    @Html.Partial("/Views/Shared/_Text.cshtml");    
    }
    

    and your partial view

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
            alert("HIT0");
            $(document).ready(function() {
                $('#MetToday').click(ehi);
                alert("HIT1");
    
                function ehi(e) {
                    e.preventDefault()
                    alert("HIT2");
                };
            });
    
    </script>
    
    
     
    <input id="MetToday" type="submit" value="Create" class="btn btn-default" />

    it worked for me, if you want use section script in your partial , you must create a custom helpers,please refer to below links:

    https://forloop.co.uk/blog/managing-scripts-for-razor-partial-views-and-templates-in-asp.net-mvc#sthash.ZLgu70HQ.dpbs

    https://stackoverflow.com/questions/5433531/using-sections-in-editor-display-templates/5433722#5433722

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 14, 2018 2:19 PM
  • User475983607 posted

    Partial Views do not have a scripts section like the main View.  If you added a scripts section to the Partial then you'll need to move the scripts section to the parent View.  The main View is responsible for loading the JavaScript application not the partial.

    The main problem you are facing is the layout view loads jQuery at the end of the HTML.  The partial can be anywhere within the docs but always loaded before the jQuery reference.  An easy fix is to move the JavaScript API references to the top of the layout view. This affects the page load as the references are loaded before the content counters the need for a scripts section.

    Otherwise, rethink the approach and write code to inject the JavaScript.  Look into tag helpers rather than partials.

    https://josephwoodward.co.uk/2017/07/injecting-javascript-into-views-using-itaghelpercomponent

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 14, 2018 2:35 PM

All replies

  • User-369506445 posted

    hi

    no , jquery works in partial view, p;leas sure about your jquert library reference, please try below code

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script>
            alert("HIT0");
            $(document).ready(function () {
                $('#MetToday').click(ehi);
                alert("HIT1");
    
                function ehi(e) {
                    e.preventDefault()
                   alert("HIT2");
                };
            }
    
        </script>
    
    /// and i am calling my partial page as 
    @await Html.PartialAsync("/Views/Shared/i-shared/i-EF/_Users.cshtml")

    Monday, May 14, 2018 9:52 AM
  • User-973886032 posted

    hi

    no , jquery works in partial view, p;leas sure about your jquert library reference, please try below code

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script>
            alert("HIT0");
            $(document).ready(function () {
                $('#MetToday').click(ehi);
                alert("HIT1");
    
                function ehi(e) {
                    e.preventDefault()
                   alert("HIT2");
                };
            }
    
        </script>
    
    /// and i am calling my partial page as 
    @await Html.PartialAsync("/Views/Shared/i-shared/i-EF/_Users.cshtml")

    does not make a difference

    Monday, May 14, 2018 11:46 AM
  • User-369506445 posted

    Colud you put your complete code here. Layout , index , partial view

    Monday, May 14, 2018 12:31 PM
  • User-973886032 posted
    @*
        For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
    *@
    
    @section scripts // PARTIAL PAGE JQuery
        {
        @RenderSection("Scripts", required: false)
    
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            alert("HIT0");
            $(document).ready(function () {
                $('#MetToday').click(ehi);
                alert("HIT1");
    
                function ehi(e) {
                    e.preventDefault()
                    alert("HIT2");
                };
            }
    
        </script>
    
    
    }
        <input id="MetToday" type="submit" value="Create" class="btn btn-default" />
    @{
        ViewData["Title"] = "test";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <h2>test</h2>
    
    
    
    @await Html.PartialAsync("/Views/Shared/_Text.cshtml");
    @{
    
     
    
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - Admin-Areana </title>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link rel="stylesheet" href="~/css/site.css" />
        </environment>
        <environment exclude="Development">
            <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
                  asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                  asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
            <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
        </environment>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Admin-Areana</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a asp-area="" asp-controller="Home" asp-action="Index">
        @Ehi Ehi+ @ViewData["Test"]
        -
    </a></li>
                        <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                        <li><a asp-area="" asp-controller="Lists" asp-action="">Lists</a></li>
                        <li><a asp-area="" asp-controller="Departments_Category_Registration" asp-action="">Category</a></li>
                        <li><a asp-area="" asp-controller="Departments" asp-action="">Departments</a></li>
                    </ul>
                    @await Html.PartialAsync("_LoginPartial")
                </div>
            </div>
        </nav>
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; 2018 - Login</p>
            </footer>
        </div>
    
        <environment include="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/js/site.js" asp-append-version="true"></script>
        </environment>
        <environment exclude="Development">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
            </script>
            <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    crossorigin="anonymous"
                    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
            </script>
            <script src="~/js/site.min.js" asp-append-version="true"></script>
        </environment>
    
        @RenderSection("Scripts", required: false)
    </body>
    </html>
    

    Monday, May 14, 2018 12:43 PM
  • User-369506445 posted

    you must change your code below like :

    @{
        ViewData["Title"] = "test";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <h2>test</h2>
    
    @section scripts
    {
    @Html.Partial("/Views/Shared/_Text.cshtml");    
    }
    

    and your partial view

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
            alert("HIT0");
            $(document).ready(function() {
                $('#MetToday').click(ehi);
                alert("HIT1");
    
                function ehi(e) {
                    e.preventDefault()
                    alert("HIT2");
                };
            });
    
    </script>
    
    
     
    <input id="MetToday" type="submit" value="Create" class="btn btn-default" />

    it worked for me, if you want use section script in your partial , you must create a custom helpers,please refer to below links:

    https://forloop.co.uk/blog/managing-scripts-for-razor-partial-views-and-templates-in-asp.net-mvc#sthash.ZLgu70HQ.dpbs

    https://stackoverflow.com/questions/5433531/using-sections-in-editor-display-templates/5433722#5433722

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 14, 2018 2:19 PM
  • User475983607 posted

    Partial Views do not have a scripts section like the main View.  If you added a scripts section to the Partial then you'll need to move the scripts section to the parent View.  The main View is responsible for loading the JavaScript application not the partial.

    The main problem you are facing is the layout view loads jQuery at the end of the HTML.  The partial can be anywhere within the docs but always loaded before the jQuery reference.  An easy fix is to move the JavaScript API references to the top of the layout view. This affects the page load as the references are loaded before the content counters the need for a scripts section.

    Otherwise, rethink the approach and write code to inject the JavaScript.  Look into tag helpers rather than partials.

    https://josephwoodward.co.uk/2017/07/injecting-javascript-into-views-using-itaghelpercomponent

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 14, 2018 2:35 PM
  • User-973886032 posted

    you must change your code below like :

    @{
        ViewData["Title"] = "test";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <h2>test</h2>
    
    @section scripts
    {
    @Html.Partial("/Views/Shared/_Text.cshtml");    
    }

    and your partial view

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
            alert("HIT0");
            $(document).ready(function() {
                $('#MetToday').click(ehi);
                alert("HIT1");
    
                function ehi(e) {
                    e.preventDefault()
                    alert("HIT2");
                };
            });
    
    </script>
    
    
     
    <input id="MetToday" type="submit" value="Create" class="btn btn-default" />

    it worked for me, if you want use section script in your partial , you must create a custom helpers,please refer to below links:

    https://forloop.co.uk/blog/managing-scripts-for-razor-partial-views-and-templates-in-asp.net-mvc#sthash.ZLgu70HQ.dpbs

    https://stackoverflow.com/questions/5433531/using-sections-in-editor-display-templates/5433722#5433722

    th

    you must change your code below like :

    @{
        ViewData["Title"] = "test";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <h2>test</h2>
    
    @section scripts
    {
    @Html.Partial("/Views/Shared/_Text.cshtml");    
    }

    and your partial view

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
            alert("HIT0");
            $(document).ready(function() {
                $('#MetToday').click(ehi);
                alert("HIT1");
    
                function ehi(e) {
                    e.preventDefault()
                    alert("HIT2");
                };
            });
    
    </script>
    
    
     
    <input id="MetToday" type="submit" value="Create" class="btn btn-default" />

    it worked for me, if you want use section script in your partial , you must create a custom helpers,please refer to below links:

    https://forloop.co.uk/blog/managing-scripts-for-razor-partial-views-and-templates-in-asp.net-mvc#sthash.ZLgu70HQ.dpbs

    https://stackoverflow.com/questions/5433531/using-sections-in-editor-display-templates/5433722#5433722

    thanks a million

    Monday, May 14, 2018 2:47 PM