Problem with script not rendering from layout

Question

_{Saturday, July 29, 2017 9:31 PM}

I have an MVC5 application which I am converting to MVC Core.

I have used the default Layout with the coding

<environment names="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>

...

@RenderSection("Scripts", required: false)

I then have a view with a script in the Header Section to set up a JQuery event handler on a drop-down list

@section Head
{

<script type="text/javascript">

$(document).ready(function () {

// Set up event handler on drop-down list

$('#ddlType').change(function (event) {
$.get('@Url.Action("Documents","Members")', { id: $(event.target).val() },
function (response) {
$('#DocumentList').html(response); }
);
});
});

</script>
}

The problem is that the event handler is not triggered when I select a choice from the drop-down box.  Using the Chrome Development Tools, I can see the message that $ is not recognised, so JQuery has not loaded when the $(document).ready(function () executes. If I insert the script <script src="~/lib/jquery/dist/jquery.js"></script> in the header section before the document.ready function, then the event handler is set up.

I am very confused.  If the JQuery script is in the layout file, why should I need another script to load JQuery in the view

What am I doing wrong, and how should I do it?

Any help would be appreciated, as I am not that experienced.

David

All replies (4)

_{Tuesday, August 1, 2017 3:26 AM ✅Answered}

Hi DavidL,

I am glad your issue has been resolved, and I would suggest you mark your reply as answer which is the way to close a thread here.

If you are interested on the reason, you could check Sections, Sections provide a way to organize where certain page elements should be placed.

After checking _Layout.cshtml, you will find the scripts like jquery.js is placed at the bottom, since your script need jquery, your script should be load after jquery, so, the render section should be placed after environment.

The section name could be customized, you could define Head section, and then render it in other cshtml. Just note, the order of the section.

    <environment names="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 names="Staging,Production">
        <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("Head", required: false);

    @RenderSection("Scripts", required: false)

.cshtml

@section Head{
  <script type="text/javascript">
    $(document).ready(function(){
        console.log("ok");
    });
   </script>
}

Best Regards,

Edward

---

_{Sunday, July 30, 2017 9:53 AM}

Hi! Is it possible that $(document).ready(...) goes before you add links to the scripts? Check your resulting HTML.

---

_{Sunday, July 30, 2017 10:26 AM}

Thanks for reply.

I think I may have found the answer to my problem.  I have moved the script to set up the event handler for the drop-down list into a @section Scripts at the bottom of the view, and deleted the scripts in the @section Head.  Now the event handler works as expected, and I do not need to reload JQuery.  It was just that I had the script in a @section Head in the MVC5 application, and it worked.

David

---

_{Tuesday, August 1, 2017 9:56 AM}

Thanks, Edward

David