'Jquery no longer working in ASP.NET Core 6, Jquery version 3.6.0
I am at a complete loss here. I have a local version (3.6.0) of Jquery in my project and suddenly it stopped registering $() or Jquery() commands. Breakpoints loop endlessly if they hit, and that is a big IF. I do use F5 and F11 to traverse through the unending break points faster.
$(document).ready(function () {
alert("works");
});
With the above, which I have been using as a test to see if Jquery can function at all. I have two break points, one on line 1 and one on line 2; 1 hits, 2 never executes. So I THINK the issues is between the two. I am not sure how though.
I have stripped my application of any other libraries and reinstalled Jquery multiple times. below is my libman.json and a screen shot of my wwwroot expanded
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "[email protected]",
"destination": "wwwroot/lib/jquery/"
}
]
}
And the layout razor file that I am using, which is in views/shared/_layout.cshtml
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html class="siteBackground" lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<meta charset="utf-8" />
<title>Lotus Transformation</title>
<script type="text/javascript" src="~/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="~/CustomJavascript/LayoutResponsiveness.js"></script>
<link rel="stylesheet" type="text/css" href="~/CustomCss/LayoutCustom.min.css"/>
<link rel="stylesheet" type="text/css" href="~/CSS/CSSReset.css" />
</head>
<body class="LayoutBody">
<header class="header">
<a asp-controller="LotusGeneral" asp-action="Home"><img class="logo" src="~/Images/Logo/R.png" /></a>
<a asp-controller="LotusGeneral" asp-action="Home"><h1 class="title">LotusTransformation</h1></a>
<a asp-controller="LotusGeneral" asp-action="Home"><h2 class="subtitle">Holistic Health and Wellness Coaching</h2></a>
<nav class="navbar">
<ul class="navUl">
<a asp-controller="LotusGeneral" asp-action="Home"><li class="navLi">Home</li></a>
<a asp-controller="LotusGeneral" asp-action="About"><li class="navLi">About</li></a>
<a asp-controller="LotusGeneral" asp-action="Services"><li class="navLi">Appointments</li></a>
<a asp-controller="LotusGeneral" asp-action="Meditations"><li class="navLi">Meditations</li></a>
<a asp-controller="LotusGeneral" asp-action="Inspiration"><li class="navLi">Inspirations</li></a>
<li></li>
</ul>
</nav>
<a asp-controller="SignIn" asp-action="SignIn"><button class="LogInButton"> Log In/Sign Up</button></a>
</header>
<div class="SpecificPageContent">
@RenderBody();
</div>
<footer class="footer">
<p>©LotusTransformation LLC</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
</footer>
</body>
</html>
I have no idea why jquery is not working, it has never given me this much trouble before. I feel like I am missing something obvious but cannot figure out for the life of me what it is.
The 14 warnings have to do with some normalization that is in my .scss file and does not impact anything that I have seen, furthermore, jquery was working fine yesterday evening and there were no changes made to the .scss file since yesterday afternoon.
I have:
- Removed all other references to JQuery libraries (there is no jquery-ui,validation.js,etc.)
- Uninstalled/reinstalled jquery through NPM and through adding a client side library
- There is are no other libraries or packages installed, with the exception of the screen shot below.
- Ensured jquery was the first script that is being loaded.
- Searched multiple resources online and in via textbooks I have.
Any help is appreciated and thank you very much in advanced.
Well, I thought I had it fixed with the help of another user, however, JQuery has stopped functioning once again. The error I am getting is that it will not even hit a breakpoint. Not even $(document).ready(function() {}); is being hit. Here is the Jquery I am trying to get to work:
$(document).ready(function () {
var initial;
initial = $(window).width() * .75;
$('.navbar').css('right', initial);
var previous = 0;
$(window).on('resize', function () {
var navmoves = ((($(window).width() * .75) / 100));
if (previous == 0) {
if ((initial - navmoves) < 0) {
navmoves = -navmoves;
$('.navbar').css("right", navmoves);
} else {
$('.navbar').css("right", navmoves);
}
} else {
if (previous != 0) {
navmoves = previous - navmoves;
$('.navbar').css("right", navmoves);
}
}
previous = abs(navmoves);
});
});
I would understand it if a part of the code wasn't working, or there was a logical error, but Jquery to cease functioning entirely... I do not get it.
I fixed the quotation error pointed out earlier and it seemed to be working, however; it seems once I code something more involved it breaks. A simple alert call does not work. The only thing I have updated since it resumed functioning is the jQuery file, none of the packages, libraries, links etc. just this single file.
Solution 1:[1]
Ok, so I went through, commenting code in and out until I fixed the errors I had made (i.e hit a breakpoint and would it run through, move on to the next line/block depending on where I was at)
The short of it, I am too reliant on Intellisense in visual studio to catch and correct my C# syntax, for conditionals like if() statements. Jquery had a meltdown due to the space between the keyword and the parentheses.
I am fully aware I am not extremely versed in Javascript/Jquery, but I did not realize how much I relied on Intellisense to correct these errors I made. Also, I am pretty sure that a space between the if keyword and the opening parenthesis in C# does not produce an error, or that has been getting auto corrected without me noticing.
Basically, I could use more practice with Jquery and should not rely on the auto-correct features of the IDE I am using to catch things in different languages.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | iHaveQuestions |