I am doing a project in Java using Spring Boot in the intellij idea under the management of Maven, and I occasionally have a problem with connecting bootstrap.min.css on the HTML page.
In my case, this problem arises spontaneously, and I could not determine its cause. Even now I have several absolutely identical projects, and in some of them this problem exists, and in others it has disappeared.
I connect bootstrap.min.css in the same way as on this page https://getbootstrap.com/docs/4.3/getting-started/introduction/
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>LoginPage2</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/static/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
when I go to the page in the browser, an error message is displayed in the console:
Refused to apply style from 'http://localhost:8081/static/css/bootstrap.min.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled
in my case it helped me:
replacing this code
<link rel="stylesheet" href="/static/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
with this one
<link rel="stylesheet" href="/static/css/bootstrap.css">
remove all comments from files bootstrap.min.css and bootstrap.css
just in case, explicitly register the path to resources in the project with spring boot, for example:
#Configuration
public class StaticResourceConfig implements WebMvcConfigurer {
private static final String[] CLASS_PATH = {"classpath:/"};
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**").addResourceLocations(CLASS_PATH);
}
}
If there is a spring security, then make sure that there is permission to the resources.
If you are using local downloaded bootstrap in your PC then, remove integrity and crossorigin from your link. I think this is work for you.
You can try this.
Add in your link tag two more attribute
type="text/css" media="all"
<link rel="stylesheet" href="/static/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" type="text/css" media="all">
Related
When i'm trying to access the api, i'm getting the following error message:
{
"errorCode": "PARTNER_AUTHENTICATION_FAILED",
"message": "The specified Integrator Key was not found or is disabled. An Integrator key was not specified."
}
I'm using the access token that returns from this URL: https://account-d.docusign.com/oauth/token, but the url address that the documentation asks to request the list of signed envelopes is this: https://demo.docusign.net/restapi/v2.1/accounts/bf672cac-****-****-****-757e9b8ebfb3/envelopes.
If I change the beginning of the end-point domain to https://account-d.docusign.com/ I get the status 200 and an HTML, which doesn't say much about the error, follows the html:
<!doctype html>
<html ng-app="LoginAppNext.App" lang="en" class="account-server">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="description" meta-description>
<title>DocuSign</title>
<link href="https://docucdn-a.akamaihd.net/olive/images/2.15.0/favicons/favicon.ico" rel="shortcut icon"
type="image/x-icon">
<base href="/">
<link rel="canonical" href="https://account-d.docusign.com/" />
<link href="/LoginAppNext/styles/olive/and/app?v=7_dKAUfFq_HQdBnGB4k7hYZKoOae-bgnT30ORlEXHEk1" rel="stylesheet" />
<!-- 21.1.2.19210 DA2DFE5 ac4fea07-f999-49e8-b450-a9bd5aa45430 -->
<!-- PAGE-TITLE DIRECTIVE MUST BE LAST INSIDE THE HEAD TAG -->
<page-title></page-title>
</head>
<body class="site-content">
<form name="fixtureForm">
<input id="fixtureInput" value="illegible value that is returned in the request">
</form>
<div ui-view></div>
<!--[if (!IE)|(gt IE 8)]><!-->
<script src="/LoginAppNext/core_via_npm?v=HmqVrseATw9A8eLx4-PxjAKYi3QSWgFzyC0R2L_sc9Q1"></script>
<!--<![endif]-->
<!--[if lte IE 8]>
<link href="/LoginAppNext/styles/legacy?v=4PA642FFntoeJCbU9Xo8MtjFl47UpOhb1wGcStBQ1UU1" rel="stylesheet"/>
<script src="/LoginAppNext/core_via_npm/legacy?v=k4d0Yt_N4blS8S0QrMQ8yybLJtbXex6uQ8SkokHHi_41"></script>
<style type="text/css">
/*
Older browsers (IE8) may interpret the new tags as having an empty XML namespace
when Angular attempts to generate them, so we need to deal with the default styling of those elements, too.
*/
\:article,
\:aside,
\:details,
\:figcaption,
\:figure,
\:footer,
\:header,
\:hgroup,
\:main,
\:nav,
\:section,
\:summary {
display: block; }
</style>
<![endif]-->
<script src="/LoginAppNext/templates?v=daF9DMXq4GIP_dsEt7fCPBYMN-A6Xk9bMZC4suEj0r01"></script>
<script src="/Scripts/app?v=lfm-G_adZ-QhT3MeHhQWFFV_fQ6ENsg6BV4q01boB6M1"></script>
</body>
</html>
Its likely that you are not passing the Authorization header in your request. In your postman request please add this in the "headers" tab just under where you enter the resource uri, in the format of Key:Authorization Value: Bearer {AccessToken}
Please have a look at our postman collection that you can easily import to see how this works: https://github.com/docusign/postman-collections
I work with a Java/Spring project and the project structure is provided below,
I need to reference the app.css in the index.jsp file. Currently, I reference the following way in the index.jsp and the app doesn't get the CSS information's.
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Bitcoin Wallet</title>
<link href="${pageContext.request.contextPath}/resources/css/app.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</html>
In the dispatcher-servlet.xml, I provided the resources path as below,
The page I get in the localhost clearly doesn't have the css. How to solve the issue?
To use resources in spring mvc project you have to declare mvc:resources, to map url to a physical file path location.
<mvc:resources mapping="/resources/**" location="/resources/css/"
When you use /resources/ in jsp file spring will map this url to /resources/css/.
Next you can reference css file in jsp file:
<link href="<c:url value="/resources/css/app.css" />" rel="stylesheet">
And move resources folder into webapp folder as
I have this JSP:
<%# page pageEncoding="UTF-8" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="http://localhost:8000/"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link type="text/css" rel="stylesheet" href="${contextPath}/css/styles.css"/>
</head>
<body>
<!-- some html -->
</body>
When I navigate to this page, I get next error:
java.lang.NoSuchMethodError: javax.el.ExpressionFactory.newInstance()Ljavax/el/ExpressionFactory;
at org.apache.jasper.compiler.JspUtil.getExpressionFactory(JspUtil.java:1182)
at org.apache.jasper.compiler.JspUtil.validateExpressions(JspUtil.java:644)
at org.apache.jasper.compiler.Validator$ValidateVisitor.visit(Validator.java:752)
at org.apache.jasper.compiler.Node$ELExpression.accept(Node.java:946)
at org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2291)
at org.apache.jasper.compiler.Node$Visitor.visitBody(Node.java:2341)
at org.apache.jasper.compiler.Node$Visitor.visit(Node.java:2347)
at org.apache.jasper.compiler.Node$Root.accept(Node.java:498)
at org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2291)
[...]
The environment to execute this page is Java 7 and Jetty.
If I remove ${contextPath} works fine.
Why i have this error?
Best regards
The cause of your error is 2 different EL language jars in your classpath.
EL version 2.1 is what is actively being used by your webapp, and is the cause of your error (that method doesn't exist in EL 2.1)
EL version 2.2 is what your webapp needs to be using for javax.el.ExpressionFactory.newInstance(), as that method was introduced in EL 2.2
Make sure you are using the correct version of the EL lib, and that you don't have multiple versions of it present in your webapp
Also, why not just use ...
<link type="text/css" rel="stylesheet"
href="${pageContext.request.contextPath}/css/styles.css"/>
and skip the whole <c:set> you are using? (your choice of a fully qualified URI is a bad idea anyway)
Netbeans HTML checking doesn't like my thymeleaf namespace.
Here is my HTML Thymleaf file:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<object th:include="fragments/meta :: meta" th:remove="tag" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'/>
<link href="/../../../webjars/Semantic-UI/2.0.6/semantic.min.css" rel="stylesheet" th:href="#{/webjars/Semantic-UI/2.0.6/semantic.min.css}"/>
<link href="../../../css/core.css" rel="stylesheet" th:href="#{/css/core.css}" />
<link href="../../../css/product.css" rel="stylesheet" th:href="#{/css/product.css}" />
</head>
<body>
</body>
</html>
This is the error displayed in Netbeans:
How can I get Netbeans to play nicely with Thymeleaf?
Try to fix it in this way you may ignore spring security thing.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="utf-8"/>
<title>Sample</title>
<link th:href="#{/resources/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
<link th:href="#{/resources/css/bootstrap-theme.css}" rel="stylesheet" type="text/css"/>
</head>
I found out how to disable these errors when I was taking this spring security tutorial
Simply by adding this to html tag:
xmlns="http://www.w3.org/1999/xhtml"
what's even cooler, netbeans now tracks if you closed every tag with slash "/" in document.
Internet Explorer doesn't support HTML <base> tag and even other browsers do, there are some problems when redirect takes place inservletsto some.jsppages for examplerequest dispatching.`
It's feasible to add ${pageContext.request.contextPath} with each URL
nor request.getServletPath()
JSP relative links for CSS and images with servlets forwarding may change things a lot. This link : Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
Is there a better approach with JSP / servlets or it's just an IE issue?
Link : HTML <base> TAG and local folder path with Internet Explorer
And if it is an IE issue:
1. how to fix the IE issue as the above post is unable to give a valid answer?
2. how to solve it with JSP / servlets?
My website is now showing CSS and images.
E.g. HTML output is:
<base href="http://localhost:8080/Alpinema/" /> is not working for
<link media="all" rel="stylesheet" type="text/css" href="css/all.css">
It works in other browsers like Firefox and Chrome.
My JSP code portion:
<head>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
<meta charset="utf-8">
<title>Alpinema.com</title>
<link media="all" rel="stylesheet" type="text/css" href="css/all.css">
/css?family=Merriweather|PT+Sans:700|Nobile:400italic' rel='stylesheet' type='text/css'>
</head>
Use <c:url> tag from JSTL to reference CSS/JavaScript resources inside my JSP files. By doing so you can be sure that the CSS/JavaScript resources are referenced always relative to the application context (context path).
Example
index.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="<c:url value="/css/main.css" />" />
<script type="text/javascript" src="<c:url value="/js/utils.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-1.8.3.js" />"></script>
</head>
<body>
...
</body>
</html>
For even more solutions see my answer here:
Adding external resources (CSS/JavaScript/images etc) in JSP.