CODEWITHSUNDEEP
htmljqueryasp.net-corerazor.net-core
gecclesinc
gecclesinc

Reputation: 290

Interesting question about script tag ordering and why it matters in this case

I have noticed it matters which scripts are on my page first or some do not load. I feel like this is dangerous because I don't know what I just broke if I add a new script.

Here is an example from my main Layout.cshtml page:

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/lib/ace/ace.js"></script>
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/jquery-areyousure/jquery.are-you-sure.js"></script>

I have jquery loading here in the second to last line. On one of my other Index pages (one that loads from this Layout page) I have to include this line for my jQuery function to work. When I already have jQuery loaded, why do I have to load it again?

Code to call a function for my dropdown list on other Index.cshtml page:

<script src="~/lib/jquery/jquery.js"></script>

@Html.DropDownList("ddlOrg", Model.OrganizationsSelectList, "-Select-", new { @id = "ddlOrg" })



<script>
    $('#ddlOrg').on('change', function () {
        var selectedValue = $(this).find('option:selected').val();
        window.location.href = "/Devices/Index?orgId=" + selectedValue.toLowerCase();
    });
</script>

Why do I have to add this script again on a subpage for it to be able to use jQuery?

Upvotes: 0

Views: 33

Answers (1)

mj1313
mj1313

Reputation: 8459

Take a look at the default layout page,

<div class="container">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2020 - WebApplication1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
    </div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)

You can see @RenderBody() is before jquery.js, when you reference the layout page, your will use jquery ($) before loading the library, and it will display a "$ is not defined error"

Option 1 is that you have mentioned in your post load the js again before your scripts.

Option 2 is Use a placeholder template that will always load after jquery but can be initialised on individual pages.

_Layout.cshtml

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)

Current Page:

@section Scripts {
<script>
$('#ddlOrg').on('change', function () {
    var selectedValue = $(this).find('option:selected').val();
    window.location.href = "/Devices/Index?orgId=" + selectedValue.toLowerCase();
});
</script>
}

Upvotes: 1

Related Questions