enter image description here this is my edit_admin code
Only in this page my html css is not getting load gretting an 404
error
i've tried alot but i can't get what's the actual reason behind this
kind of error
Refused to apply style from '' because its MIME type
('text/html') is not a supported stylesheet MIME type,andstrict MIME
checking is enabled in nodejs
Refused to apply style from 'http://localhost:5000/admin/css/bootstrap3.3.7.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="../css/bootstrap3.3.7.min.css">
<link rel="stylesheet" type="text/css" href="../fonts/font-awesome-4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet" type="text/css" href="../css/dashboard.css">
</head>
<body>
<!-- SIDE BAR START -->
<%- include('../partials/admin_sidebar.ejs'); %>
<!-- SIDE BAR END -->
<section id="contents">
<nav class="navbar navbar-default">
<!-- NAV BAR START -->
<%- include('../partials/admin_navbar.ejs'); %>
<!-- NAV BAR END -->
</nav>
<div class="container-fluid">
<div class="row" style="background-color: white;">
<div class="col-md-8">
<form action="/admin/edit_admin/<%- admin.id %>" method="post">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" value="<%- admin.email %>" name="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<!-- <div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div> -->
<div class="form-group">
<label for="password">Password</label>
<input type="password" value="<%- admin.password %>" name="password" class="form-control" id="password" placeholder="password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-success" name="submit">
</div>
</form>
</div>
</div>
</div>
</section>
<script src='http://code.jquery.com/jquery-latest.js' type="text/javascript"></script>
<script src='../js/main.js' type="text/javascript"></script>
<script src='../js/dashboard.js' type="text/javascript"></script>
I think you need to specify your assets folder in your nodejs app file.
app.use(“ASSETS_FOLDER”, express.static(“ASSETS_FOLDER”);
Your css file path for http://localhost:5000/admin/css/bootstrap3.3.7.min.css is incorrect.
Because it can not find the file on specified path, it goes to the 404 & returns html page of 404, which causes you to see this error
I would suggest to use absolute path for referring to your static css/js resource files as it might need to be accessed from various locations, relative path might not work if accessed from different places
To be sure that this is the error you have, just paste this url http://localhost:5000/admin/css/bootstrap3.3.7.min.css in your browser & see if you get css file there, if you see 404 page, the error is exactly what I explained above.
UPDATE > Ideal way giving reference to assets in ejs
You can pass base_url like this in your routes while rendering ejs
res.render('edit', {
base_url: "http://" + req.headers.host
})
And then specify link urls like this show it always catches the exact file no matter where you call it from
<link rel="stylesheet" type="text/css" href="<%= base_url%>/css/bootstrap3.3.7.min.css">
<link rel="stylesheet" type="text/css" href="<%= base_url%>/fonts/font-awesome-4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet" type="text/css" href="<%= base_url%>/css/dashboard.css">
Related
const express = require('express');
const path = require('path');
const app = express();
// Use static folder middleware
app.use(express.static(path.join(__dirname , "public")));
// Get
app.get("/" , (req , res)=>{
res.sendFile(`${__dirname}/index.html`);
});
// Listen
app.listen(3000 , ()=>{
console.log('server running on port 3000');
});
Folder structure
Root
-index.html
-app.js
public
-css
-index.css
-images
-image.png
In the index.html page The index.css file and the image.png are linked.
However, Those two are not being server as static files in app.js. But I have included the middle for serving static folders.
can some one explain what is the issue
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap
contributors">
<meta name="generator" content="Hugo 0.82.0">
<title>Sign up</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/5.0/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-
beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-
touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png"
sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png"
sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-
tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="./public/css/index.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin">
<form action="/" , method="POST">
<img class="mb-4" src="./public/images/image.png" alt="" width="72"
height="57">
<h1 class="h3 mb-3 fw-normal">Sign Up</h1>
<div class="form-floating">
<input type="text" name="fname" class="form-control top"
id="firstName" placeholder="first name">
<label for="firstName">First Name</label>
</div>
<div class="form-floating">
<input type="text" name="lname" class="form-control middle" id="lastName" placeholder="last name">
<label for="firstName">Last name</label>
</div>
<div class="form-floating">
<input type="email" name="email" class="form-control bottom" id="email" placeholder="inkey#email.com">
<label for="email">Email ID</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2020–2021</p>
</form>
</main>
</body>
</html>
This is the html page taken from bootstrap
The css file under the comment custom styles for this template
and the png is below the form tag.
The files are added correct as when the html page is seen in the browser independently then the image and css is showing up
However when it is served using node and express the image and css arent showing up
OK, So I am answering my own question here.
After refering to #jdmayfield 's answer and searching about MIME type errors I reached link to this link.
I realised that when you set the pubic folder as static in node, Then that public folder should not be added in the path to css or images in html
Meaning that
In the folder structure given above if we want to link css in html the code we use is
<link href="./public/css/index.css" rel="stylesheet">
And this gave me a MIME type error.
So I changed the above code to
<link href="css/index.css" rel="stylesheet">
This worked.
However if You independently open the HTML file by going live in vscode, the css and images wont load. But when served with node they will be served.
UPDATED POST:
In light of the recent comment by #Nav giving the error regarding mime-type, here is a snippet I found at Express: Setting content-type based on path/file?
"The Express documentation shows that it can do this if you pass in the
file name."
var filePath = 'path/to/image.png';
res.contentType(path.basename(filePath));
// Content-Type is now "image/png"
Try this example first. If that does not work, reload and check Dev console for different errors. It is possible there is more than one cause of your issue.
ORIGINAL POST:
Based on the code you have submitted, I think your problem is the default CORS policy. You need to incorporate a method of allowing Cross-Origin Resource Sharing between the domains, ports, and protocols you are using. I found a good document detailing CORS explicitly, but succinctly, with a solution that appears specifically suited to your needs. You might open the Dev console in your browser and look for similar error messages as outlined in the document to confirm.
Here's the link:
https://flaviocopes.com/express-cors/
I am making a discord bot with website, and i have defined css and other stuff in .html file but its still not showing when i go to the website.
res.status(200).sendFile(path.resolve(__dirname, "../../website/command.html"))
})
Thats how i require the html file.
The Html File:
<html lang="en-US">
<head>
<title>Commandli</title>
<link rel="icon" href="https://cdn.discordapp.com/avatars/746706292562853888/0b578635739cbd7e5b076e65f2c04a4c.png?size=2048">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/commands.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<img src="https://cdn.discordapp.com/avatars/"/> bot
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li><a class="active" href="commands.html">Commands</a></li>
<li>About us</li>
<li>Contact us</li>
<li>Invite bot</li>
</ul>
</header>
<main>
<section class="tabs">
<div class="tab-header">
<div class="tablink tab-active" onclick="openCity(event,'Utility')">Utility</div>
<div class="tablink " onclick="openCity(event,'Fun')">Fun</div>
<div class="tablink" onclick="openCity(event,'Economy')">Economy</div>
<div class="tablink" onclick="openCity(event,'Info')">Info</div>
<div class="tablink" onclick="openCity(event,'Games')">Games</div>
<div class="tablink" onclick="openCity(event,'Misc')">Misc</div>
<div class="tablink" onclick="openCity(event,'All commands')">All commands</div>
</div>
<div style="margin-left:130px">
<div id="Utility" class="tab-content category" style="display:block">
<p><a>Utility commnads</a><br>Those commands help you with some things</p>
<p><a>=dungeon</a><br>Sends information about the current dungeon.</p>
<p><a>=help</a><br>Sends help!</p>
<p><a>=gamepedia</a><br>Search what you want on gamepedia</p>
<p><a>=welcome info</a><br>Information about the welcome system</p>
<p><a>Soon more!</a><br>Stay tuned!</p>
</div>
</div>
<script type="text/javascript" src="../js/commands.js"></script>
</section>
</main>
</body>
</html>
HTML file in bin = https://sourceb.in/DEA1wBlvs2
(Had to remove some code because it was huge)
I have basic code which works as:
$voice = new COM("SAPI.SpVoice");
voice .Speak("hello world");
I am getting RID of default voice, So
I am now looking at a way to change which voice is getting used for the TTS.
I want to change SAPI voice to ZIRA
What is the correct way to change the default voice, I read some thread here , But it is in javascript, and it is not working.
my code :
#$submit = $_POST['process'];
#$word = $_POST['texttospeech'];
$voice = new COM("SAPI.SpVoice");
if($_SERVER["REQUEST_METHOD"] == "POST" and isset($submit) and !empty($word)){
$voice->Speak($word);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<title>PHP Text to Speech</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/fav.png" type="image/png">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body onload="startTime()">
<nav class="navbar-inverse" role="navigation">
<a href="https://google.com/" target="_blank">
<img src="img/cod.png" class="hederimg">
</a>
<div id="clockdate">
<div class="clockdate-wrapper">
<div id="clock"></div>
<div id="date"><?php echo date('l, F j, Y'); ?></div>
</div>
</div>
</nav>
<div class="topmost">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<center>
<strong class="panelinputtitle">PHP Text to Speech Converter Using Microsoft Speech API</strong>
</center>
</div>
<div class="panel-body">
<form method = "POST">
<div class = "form-group">
<textarea class="form-control input-sm" rows="6" name="texttospeech" placeholder="Type your Text Here..."></textarea>
</div>
<div class = "form-group">
<input type = "submit" class = "btn btn-primary btn-block" name="process" value="Speak">
</div>
</form>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Thanks in advance.
I've searched this one a long time ..
At least selecting Zira within the control panel as default voice works
The issue is a validation messages appears and the textfield turns red when specific fields are clicked and blurred out. But when I click the submit button of the form without touching any of the input fields, no error messages are shown and none of the textfields turn red.
The correct way is, it has to show all the validation messages during the submission and all the textfields have to turn red.
The plunk for this is
http://plnkr.co/edit/fNUdp7Qdd0ysrd0eiPFT
<!DOCTYPE html>
<html>
<head>
<title>Angular-Formly</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>
<!-- form declaration-->
<body ng-app="app" ng-controller="MainController as vm">
<div class="container col-md-4 col-md-offset-4">
<form novalidate name="vm.form" ng-submit="vm.formsubmit()" >
<formly-form model="vm.user" fields="vm.fields" form="vm.form" >
</formly-form>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- Application Dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/api-check/7.2.4/api-check.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script data-require="angular-messages#1.4.8" data-semver="1.4.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly/6.11.0/formly.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/4.3.1/angular-formly-templates-bootstrap.js"></script>
<!-- Application Scripts -->
<script src="app.js"></script>
<script src="MainController.js"></script>
<script type="text/ng-template" id="custom-messages.html">
<div class="my-messages" ng-messages="field.$error" ng-style="{color: 'red'}" ng-if="form.$submitted">
<div class="my-message" ng-message"required">required Message</div>
</div>
</script>
<script type="text/ng-template" id="formly-messages.html">
<formly-transclude></formly-transclude>
<div class="my-messages" ng-messages="form.$error" ng-style="{color: 'red'}" ng-if="fc.$touched">
<div ng-repeat="(name, message) in ::options.validation.messages" ng-message="{{::name}}">{{message(fc.$viewValue, fc.$modelValue, this)}}
</div>
</div>
</script>
</body>
</html>
Can anyone kindly give me the solution for this? Thanks in advance
It seems the form won't allow you to submit it, because you've got required fields in there.
Therefore the form.$submitted value will never be true in your option setting formlyConfigProvider.extras.errorExistsAndShouldBeVisibleExpression.
I left on Friday with my application working in dev mode....I came in this morning and the Layout.Mobile.chtml was NOT being used.....THIS IS DEV MODE so I still starting the web server each time.... I read about a similar issue related to the cache....but I don't see how this could be related to my problem as once the web server shuts down the cache is cleared.
I am using Visual Studio 2012 as my development "web server".
Everything was running and I don't see where the problem is nor do I understand where to look next. Any suggestions of how to diagnosis this problem or where to look would be appreciated.
This is ONLY for the Layout.Mobile.cshtml....when I switch back to the Layout.cshtml it is being called fine....
In my global.asax.cs I have the following set to force firefox to display using the mobile layout:
//The following forces Firefox to use the Mobile View ONLY
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("mobile")
{
ContextCondition = (context =>
context.Request.UserAgent.IndexOf("Mozilla", StringComparison.OrdinalIgnoreCase) >= 0)
});
My _ViewStart.cshtml file is:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
My _Layout.Cshtml is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Etracs</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
#RenderSection("scripts", required: false)
</head>
<body>
<header>
*#
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#Html.Partial("_ViewSwitcher")
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - Turning Basin Services</p>
</div>
</div>
</footer>
</body>
</html>
My _Layout.Mobile.cshtml is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
#* #Styles.Render("~/Content/Mobile/css") *#
#* #Styles.Render("~/Content/jquerymobile/css") *#
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
#* #Scripts.Render("~/bundles/jquery") *#
#* #Scripts.Render("~/bundles/jquerymobile") *#
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
#RenderSection("scripts", required: false)
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header">
#RenderSection("backbtn", false)
<h1>#ViewBag.Title</h1>
#RenderSection("Home", false)
</div>
<div data-role="content">
#* #RenderSection("featured", false) *#
#RenderBody()
</div>
<div data-role="footer">
<h4> #Html.Partial("_ViewSwitcher") © #DateTime.Now.Year - Turning Basin Services</h4>
</div>
</div>
</body>
</html>
In my views I am usually setting up the view to impliclity map to the Layout using viewstart.... however, my .Login.Mobile.cshtml hardwires the assocaiation to the mobile layout as follows:
#model TBS.Etracs.Web.Main.Models.LoginModel
#{
ViewBag.Title = "Log in";
Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
}
#Html.ValidationSummary(true)
<section id="loginForm">
#* #using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) { *#
#using (Html.BeginForm ("Login")) {
#Html.AntiForgeryToken()
<div data-role="content">
<div data-role="fieldcontain">
<label for="UserName">UserName:</label>
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div data-role="fieldcontain">
<label for="Password">Password</label>
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</div>
<div data-role="fieldcontain">
<label for="ProgramMode">ProgramMode</label>
<select name="ProgramMode" id="ProgramMode">
<option value="VW">VW</option>
<option value="Porsche">Porsche</option>
<option value="Bentley">Bentley</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="ConnectionMode">ConnectionMode</label>
<select name="ConnectionMode" id="ConnectionMode">
<option value="Production">Production</option>
<option value="Test">Test</option>
</select>
</div>
<input type="submit" value="Log in" />
</div>
}
</section>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I see you acknowledged you didn't believe this was related to the cache - but I'm adding this here since it's critical to be aware of when using mobile views.
The caching bug is explained here
Dave Ward:
Something everyone should be aware of when using MVC 4's mobile view
support is that there's a bug in the RTM version that results in the
wrong view being rendered for mobile devices after the view falls out
of the resolution cache the first time. The tricky part is that you
won't notice this in debug mode or until 15 minutes of inactivity in
release mode, so it's incredibly easy to let the buggy behavior slip
into production. There's an easy fix on NuGet, which Rick Anderson
covers here:
http://blogs.msdn.com/b/rickandy/archive/2012/09/17/asp-net-mvc-4-mobile-caching-bug-fixed.aspx
See also comments in this post
http://www.hanselman.com/blog/MakingASwitchableDesktopAndMobileSiteWithASPNETMVC4AndJQueryMobile.aspx
If you have a custom view engine (like i do) you can just change the base class after installing the nuget package:
public class SiteIdentityViewEngine : Microsoft.Web.Mvc.FixedRazorViewEngine, IVirtualPathFactory
Using Glimpse I found that that the _layout.mobile.cshtml was still being called and included....the problem was that it was not working....which relates to a problem I had earlier.....
In my _Layout.Mobile.chtml I went back to the following code and my layout is now working
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
I used this to replace the following lines in my _layout.Mobile.cshtml
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
The big question that I am VERY confused about is what happened .... this prevous worked for several days and then quit working..... Input would be appreciated.