I am trying to add a link to .js file in Pages/_Layout.cshtml However I am getting following exception:
Severity Code Description Project File Line Suppression State Error
(active) CS0103 The name 'antv' does not exist in the current
context Blazing C:\Users\Laptop\source\repos\Blazing\Blazing\Pages_Layout.cshtml 31
_Layout.cshtml:
#using Microsoft.AspNetCore.Components.Web
#namespace BlazingDiary.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="BlazingDiary.styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
#RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="https://unpkg.com/#antv/g2plot#1.1.28/dist/g2plot.js"></script>
<script src="_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
</body>
</html>
Problems is in this particular link https://unpkg.com/#antv/g2plot#1.1.28/dist/g2plot.js. Was googling for couple of hours without success. Any ideas?
This is solved in .net 6.
In .net 5 (and before) the razor engine appears to stick its nose where it doesn't belong. Luckily there is an easy fix, escape the # as ##:
<script src="https://unpkg.com/##antv/g2plot#1.1.28/dist/g2plot.js"></script>
Related
This is a tough one to explain. In my local environment in my `BundleConfig.cs' I have the following.
bundles.Add(new ScriptBundle("~/bundles/jlibrary").Include(
"~/Scripts/bootstrap.min.js",
"~/Scripts/datatables-simple-demo.js",
"~/Scripts/scripts.js",
"~/Scripts/moment-with-locales.js"
));
When I am debugging locally all my javascript try to work, specifically the moment-with-locales.js. When I publish to the server, it doesn't have a clue about moment-withlocales.js or scripts.js.
In my view I have the following:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Executing Trades - #ViewBag.Title</title>
<!--CSS STYLE-->
#Styles.Render("~/Content/css")
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/Content/kendo.common.min.css" />
<!--<link rel="stylesheet" href="~/Content/kendo.classic-main-dark.min.css" />-->
#* Add the jQuery script from the Telerik CDN: *#
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/jquery.min.js"></script>
#* Add the Kendo UI scripts: *#
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.aspnetmvc.min.js"></script>
<script src="~/Scripts/kendo-ui-license.js"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.13.2.min.js"></script>
<script src="~/Scripts/scripts.js"></script>
<script src="~/Scripts/moment-with-locales.js"></script>
#* Add the bootstrap.min.js script: *#
#Scripts.Render("~/bundles/jlibrary")
</head>
If I don't add <script src="~/Scripts/scripts.js"></script> <script src="~/Scripts/moment-with-locales.js"></script> to the header the server doesn't know about it.
I thought #Script.Render would tell the server to use the javascript like it does locally. I also might not understand the real issue.
Dashboard:48 Error converting date time ReferenceError: moment is not defined
at HTMLDivElement.<anonymous> (Dashboard:43:38)
at Function.each (jquery.min.js:2:2898)
at n.fn.init.each (jquery.min.js:2:846)
at HTMLDocument.<anonymous> (Dashboard:40:31)
at i (jquery.min.js:2:27466)
at Object.fireWith [as resolveWith] (jquery.min.js:2:28230)
at Function.ready (jquery.min.js:2:30023)
at HTMLDocument.K (jquery.min.js:2:30385)
In order to get a mobile nav menu working I've got this Javascript block:
function AddMobileNavMenu() {
var $body = $('body')
$(
'<div id="navPanel">' +
$('#nav').html() +
'' +
'</div>'
)
.appendTo($body)
.panel({
delay: 500,
hideOnClick: true,
hideOnSwipe: true,
resetScroll: true,
resetForms: true,
side: 'left'
});
}
But I can't get that javascript working with Blazor - I've read through all the JSInterop documentation and figured out that this (in the _Host.cshtml file):
#page "/"
#namespace FIS2.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FIS2</title>
<base href="~/" />
<link rel="stylesheet" href="FontAwesome/scss/fontawesome.min.css" />
<link rel="stylesheet" href="FontAwesome/scss/solid.min.css" />
<link rel="stylesheet" href="FontAwesome/scss/regular.min.css" />
<link rel="stylesheet" href="css/syncfusion/syncfusionTheme.css" />
<link rel="stylesheet" href="css/site/Components/site.min.css" />
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<script src="_framework/blazor.server.js"></script>
<script src="Scripts/jquery-3.6.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script src="Scripts/AddMobileNavMenu.js"></script>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
</body>
</html>
Allows you to call it from the relevant component, like so:
await jsRuntime.InvokeVoidAsync("AddMobileNavMenu");
So long as you've injected IJSRuntime
The only problem is that it doesn't seem to be loading in the jQuery and triggers an error saying appendTo is not a function. What am I missing in order to make this work?
Looking at the issue with fresh eyes, I've realised my mistake - it turns out that it wasn't complaining about appendTo, but rather panel. I hadn't realised that was part of another library - importing that library after jquery (but before the custom function) solved the issue.
I'll leave the question here in case someone else goes down the train of thought that I did on Friday.
In my app I get error message in console
GET chrome-extension://lncjpblllfcpljbdelleomhnlgdlhhmm/content/styles.css net::ERR_FILE_NOT_FOUND
after every new request, but in the same time I do not see any other issues and application seems to be running correctly. Currently I cannot look up any line in my code files where the styles.css file is mentioned (only App.css and all.css).
Why cannot this file be found and how can I fix it?
Here is an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Welcome to DevConnector!</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I am doing up a log-in page but I'm unsure why the validation script is not loading. I was able to log in without an error like this yesterday. However, when I tried to log in today, I was met with this error.
Is it the placement of my script?
I've tried rearranging the scripts, and checking other files such as my js and the file location of jquery.validate.min.js, but all seems fine.
.html
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!--<meta http-equiv="refresh" content="5">-->
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge" />-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="lib/jquery.validate.min.js"></script>
<!--<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />-->
<script src="scripts/common.js"></script>
.JS
var userid;
var password;
$(document).ready (function () {
$("#LoginForm").validate({ // this line is the error highlighted in console
messages: {
txtLogin: "User ID is required",
txtPassword: "Password is required",
},
I believe I should be able to log in after solving this as I have configured my PHP and other files correctly. The JS file seems fine too.
In order to use the validation method of jQuery, you need to import the relative plugin:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
Also, at start of your JavaScript file insert this:
require('jquery-validation');
For example:
<form>
<input required>
</form>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
$("form").validate();
</script>
See the official documentation for more information.
I have an index.html and edit.html and trying to do the following, but by clicking the second and third link, the emulator showed me an error saying: Application Error, A network error occurred (file://android_asset/www/edit.html?id=2) and (file://android_asset/www/edit.html?id=3)
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body id="stage" class="theme">
<h1>Welcome to XXX!</h1>
1
2
3
</body>
</html>
my edit.html is just a html header and body.
Any idea why?
Yes, this is a bug in Android not PhoneGap. Go star this Google issue to add your voice:
http://code.google.com/p/android/issues/detail?id=17535
In other news we believe we will have a work around in the 1.9.0 release which will be out at the end of the month.