MVC Bundling and Script.Render. Js doesn't work when publishing - javascript

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)

Related

How to load external iframe?

I am using pdf js express viewer to work with pdf's
https://pdfjs.express/
When I download their example everything is working fine. But I have older project where I try to integrate this depndency and I am having error
Refused to load the script 'http://localhost:65534/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
I don't understand why I get this error due to CSP.
So it seems that internally there is a problem for my application to load pdf js express ( on other project samples it is not a problem I don't get this error )
My index html file looks like this
<html data-ng-app="xecm-webapp" ng-controller="MainCtrl" class="no-js" manifest="offline.manifest">
<head>
<meta charset="utf-8">
<title>App</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width">
link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css"/>
<link rel="stylesheet" href="bower_components/perfect-scrollbar/src/perfect-scrollbar.css"/>
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.css"/>
<link rel="stylesheet" href="bower_components/xcomponent-widgets/css/object-display-storyline/object-display-storyline.css" />
<!-- build:css styles/xecm-webapp-styles.css -->
<link rel="stylesheet" type="text/css" href="css/t2i-bootstrap/t2i-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/extend-bootstrap.v4.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/flex-utils.css"/>
<link rel="stylesheet" href="css/styles/main.css"/>
<link rel="stylesheet" href="css/styles/spinner-custom.css"/>
<link rel="stylesheet" href="css/components/application-manage/application-manage.css"/>
<script src="components/application-manage/application-manage-directive.js"></script>
<script src="components/application-manage/application-manage-label.js"></script>
<script type="text/javascript" src="bower_components/xcomponent-widgets/TimelineJS/build/js/storyjs-embed.js"></script>
<script type="text/javascript" src="./components.js"></script>
<script type="text/javascript" src='./scripts/lib/lib/webviewer.min.js'></script>
</head>
</html>
I tried adding this inside my head under other meta tags
<meta http-equiv="Content-Security-Policy" content="script-src http://localhost:65534 'unsafe-eval';">
but I have same error. What should I do and why I am getting this error ?

# (at) symbol in script link is causing exception

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>

TypeError: $(...).validate is not a function

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.

Uncaught ReferenceError: jQuery is not defined (jQuery ALREADY defined)

I'm trying to use jScrollPane, and I'm getting jQuery is not defined.
We all know the universal answer to this: load jQuery first, however, i'm loading it before, and i'm intializing jScrollPane on $(document).ready() (I'm using jquery, how can it not be there?)
Here's my markup:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<script type="text/javascript" url="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" url="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<!-- Jscrollpane so we can style scroll bar cross-browser -->
<!-- styles needed by jScrollPane -->
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
</head>
And here is my script
$(document).ready(function() {
/* Setting up the dropdown */
var dropdown = new DropdownMenu();
dropdown.run();
/* Setting scrollbar */
$('#dropdown-menu .content').jScrollPane();
});
What may be happening? All I can find around the web is telling me to initialize jquery first, but it is initialized.
Why url attribute instead of src in your script tag reference? I don't think it's a valid syntax.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
Try:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

Uncaught TypeError: Cannot read property 'PhotoSwipe' of undefined in javascript

I'm trying to implement swiping of image using html and javascript for phonegap application, following this demo PhotoSwipe there it works fine, but after adding into my project, not able to swipe the images. and even linked the js files correctly still i get this error in logcat "Uncaught TypeError: Cannot read property 'PhotoSwipe' of undefined at file:///android_asset/www/examples/01-default.html:26"
any idea on my issue? Thanks.
swipe code
<title>PhotoSwipe</title>
<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="css/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript">
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
<script type="text/javascript" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" src="/libs/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.min.js"> </script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.5.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.5.js"></script>
<script type="text/javascript" src="photoswiper.js"></script>
}
Add the js files before the script that you have written, it might be the cause of the problem because the photoswipe features that you are trying to use in the script have not been loaded and hence are not available yet.

Categories