ASP.NET Core: jQuery Error 404 for the online version of the project
Question
The problem:
Recently I've been modifying my Javascripts references in my project since they were repeting in several views (between the _Layout and views) causing errors.
At this moment there are no visible errors while working locally but once the project is online (thru Azure) the error 404: failed to load resource appears in the scripts section.
Information:
This is the current _Layout of the project:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Plataforma Fantasy Park</title>
<environment names="Development">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/jquery.dataTables.min.js" asp-append-version="true"></script>
<script src="~/js/dataTables.bootstrap.min.js" asp-append-version="true"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<link rel="stylesheet" href="~/css/bootstrap-lumen.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/nestednavbar.css" />
<link rel="stylesheet" href="~/css/dataTables.bootstrap.min.css" />
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"
asp-fallback-src="~js/jquery-3.2.1.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>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="/css/bootstrap-sand.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>
@RenderSection("css", required: false)
</head>
<body>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2017 - Plataforma Fantasy Park</p>
</footer>
</div>
@RenderSection("Scripts", required: false)
</body>
</html>
As it can be seen, both the Development and Staging,Production enviroments have the references for jquery but for the purpose of this project I'll be working only with the references of the Development enviroment.
However, in the online version this errors show up:
I had these errors and it usually was because the jQuery was defined more than once in the view, or after a dependency such as bootstrap was declared, but this does not seem the case. As a consecuence none of the jQuery scripts is executing properly on the online version.
This is the result of the Network tab:
It looks like the jquery librery is being loaded correctly.
The following code is the source code of the view:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Index - Plataforma Fantasy Park</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/jquery.dataTables.min.js?v=qcV1wr-bn4NoBtxYqghmy1WIBvxeoe8vQlCowLG-cng"></script>
<script src="/js/dataTables.bootstrap.min.js?v=X_58s5WblGMAw9SpDtqnV8dLRNCawsyGwNqnZD0Je_s"></script>
<script src="/js/site.js?v=ViqmmChOp_51fH3dM_KEQAFClKU0vp0UrxlREwyHKHc"></script>
<link rel="stylesheet" href="/css/bootstrap-lumen.css" />
<link rel="stylesheet" href="/css/site.css" />
<link rel="stylesheet" href="/css/nestednavbar.css" />
<link rel="stylesheet" href="/css/dataTables.bootstrap.min.css" />
</head>
<body>
<div class="container body-content">
<nav class="navbar navbar-inverse navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Plataforma Fantasy Park</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/HechosLiquidadors/IndexAdmin">Liquidaciones</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Máquinas <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="dropdown-item" tabindex="-1">Registro</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a tabindex="-1" href="/Machines">Datos Comerciales</a></li>
<li class="dropdown-item"><a tabindex="-1" href="/Machines/Workshop">Datos de Fabricación</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a href="/Machines/Familias">Familias y Tipos</a></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-item" tabindex="-1">Gestión</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a tabindex="-1" href="/Machines/Management">Máquinas</a></li>
<li class="dropdown-item"><a tabindex="-1" href="/Machines/Contadores">Contadores</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Tiendas <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/Stores">Registro</a></li>
<li class="divider"></li>
<li><a href="/Stores/Management">Liquidadores</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Proveedores <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/Suppliers/Supplier">Fabricantes y Marcas</a></li>
<li><a href="/Suppliers/Dealer">Dealers</a></li>
</ul>
</li>
<li><a href="/">Gastos</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Usuarios <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/User">Usuarios</a></li>
<li><a href="/ApplicationRole">Roles</a></li>
</ul>
</li>
<li><a href="/Home/About">About</a></li>
</ul>
<form method="post" id="logoutForm" class="navbar-right" action="/Account/SignOff">
<ul class="nav navbar-nav navbar-right">
<li>
<a title="Manage" href="/Manage">Hello adelgado!</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
</li>
</ul>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8P12Ot7bDOBImhnZFhlI8qHJtKdMI-7lr8LhbUsd_y-3eQSYnYA19_MyhKx_JGsHcwdpm_ZQCqHibSVsLLwXaJ-PRiZg6VJXvFUtHaAK6IAPSBfOgrVrEBeimgbOvB60ahTqLMUeuUsFEXIIrmYiyBgxQVeQJEkPBbIEsMlFv-8A91-ULjKZlim2P0NZaUuLSA" /></form>
</div>
</div>
</nav>
<h2>Tiendas</h2>
<div class="btn-group" id="modalbutton">
<a id="createEditStoreModal" data-toggle="modal" data-target="#modal-action-store" class="btn btn-primary" href="/Stores/Create">
<i class="glyphicon glyphicon-plus"></i> Nueva Tienda
</a>
</div>
<p></p>
<table id="stores" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>
Tienda
</th>
<th>
Dirección
</th>
<th>
Área
</th>
<th>
Distrito
</th>
<th>
Cadena
</th>
<th>Editar</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div aria-hidden="true" aria-labelledby="modal-action-store-label" role="dialog" tabindex="-1" id="modal-action-store" class="modal fade">
<div class="modal-dialog ">
<div class="modal-content">
</div>
</div>
</div>
<hr />
<footer>
<p>© 2017 - Plataforma Fantasy Park</p>
</footer>
</div>
<script src="/js/store-index.js?v=xMseET7-q434oUXfBjpd5QKjSw8t0R0P_mGdZorHwB0"></script>
<script type="text/javascript">
var global = this;
var wasclicked = 0;
$(document).ready(function () {
document.getElementById("modalbutton").onclick = function () {
global.wasclicked = 1;
};
$('#modal-action-store').on('hidden.bs.modal', function () {
global.wasclicked = 0;
});
$('#modal-action-store').on('shown.bs.modal', function () {
if (global.wasclicked == 1) {
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
}
$('#DepartmentID').change(function () {
var url = '/' + "Stores/GetDistrict";
var ddlsource = "#DepartmentID";
$.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
var items = '';
$("#DistrictID").empty();
$.each(data, function (i, district) {
items += "<option value='" + district.value + "'>" + district.text + "</option>";
});
$('#DistrictID').html(items);
});
});
});
});
</script>
</body>
</html>
I have been trying to detect what could be wrong for the online version to produce some errors that were not shown while the project was tested locally but I haven't succeeded in trying to find out. Hope anyone can help me understand what could be wrong in this case.
Update:
For what I tested, it seems like jQuery works for a few seconds and then suddenly stops working but no error message related to this is displayed.
Note to mention, the error message appears at the top of the html too:
But that can be related to the fact that is missing these files:
1 answers
solution1
0 2017-12-02 20:48:03
Why not just use a boolean var?
instead of
var global = this;
var wasclicked = 0;
Something like thise:
var isClicked = false;
$(document).ready(function () {
$("#modalbutton").on("click", function () {
isClicked = true;
});
$('#modal-action-store').on('hidden.bs.modal', function () {
isClicked = false;
});
$('#modal-action-store').on('shown.bs.modal', function () {
if (isClicked) {
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
}
$('#DepartmentID').change(function () {
var url = '/' + "Stores/GetDistrict";
var ddlsource = "#DepartmentID";
$.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
var items = '';
$("#DistrictID").empty();
$.each(data, function (i, district) {
items += "<option value='" + district.value + "'>" + district.text + "</option>";
});
$('#DistrictID').html(items);
});
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery & Bootstrap in ASP.NET Core project
ASP.NET WebForms Web API jQuery - 404 Error
Auto complete ERROR 404 in HTML (using ASP.NET and JQuery)
jQuery and $ not defined in ASP.NET Core project using webpack
ASP.net MVC project: should I update jQuery version?
JQuery Post to ASP.NET Core results in CORS error
Redirect Page With JQuery In Asp.net Core
ASP.NET Core : include jquery in a view
ASP.NET Core 6 jQuery Validation not working
Asp.net core MVC and JQuery submit
Related Tags