I have added following configurations, but it wont apply the css and js. Is there anythy i need to add other than these
Config.xml
<mvc:resources mapping="/resources/**" location="/resources/" />
jspfile
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<spring:url value="/resources/css/metro.css" var="metro" />
<spring:url value="/resources/css/metro-schemes.css" var="metroschemes" />
<spring:url value="/resources/css/metro-icons.css" var="metroicons" />
<link href="${metro}" rel="stylesheet">
<link href="${metroschemes}" rel="stylesheet">
<link href="${metroicons}" rel="stylesheet">
<script src="${jquery}"></script>
Related
I am using latest bits of Blazor WebAssembly Hosted Project.
I found a strange behaviour in that when i pass a non-exisitng route to api, the return status is 200 success becuase it return default html blazore page(index.html).
HttpResponseMessage response = await _Http.GetAsync($"api/Account/OTPVerification?userName={loggidInUser.Email}&OTP={_OTP}");
if (response.IsSuccessStatusCode)
{
}
The actual response returned is, which turns out to be(index.html) 200, success, whereas it is no where what i expect
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorWebAssembly</title>
<base href="/" />
<script src="https://kit.fontawesome.com/xxxxxxxxxxf.js" crossorigin="anonymous"></script>
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
In your Startup.cs you can try removing:
endpoints.MapFallbackToFile("index.html");
So in your ApiController, if it's not in the route, it will return a 404 instead of index.
I have tried during many days, I have seen many posts, and I can't resolve this problem.
When I want to put a css into my jsp and load my page I have this :
2019-11-15 11:00:38.895 WARN 11504 --- [nio-8080-exec-7] o.s.web.servlet.PageNotFound : No mapping found for HTTP request with URI [/resources/genius/css/carousel.css] in DispatcherServlet with name 'dispatcherServlet'
My Arborescense:
src-----
|main
--------
|java
--------
|resources
---------application-properties.txt
--------
|webapp
---------|resources
---------
| genius
---------|css
---------bootstrap.min.css
---------carousel.css
---------font-awesome.min.css
---------|font
---------|js
---------|images
---------style.css
---------|WEB-INF
My jsp:
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%# taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
<link href="<c:url value="/resources/genius/css/carousel.css" />" rel="stylesheet">
<link href="<c:url value="/resources/genius/css/bootstrap.min.css" />" rel="stylesheet">
<link href="<c:url value="/resources/genius/css/font-awesome.min.css" />" rel="stylesheet">
<link href="<c:url value="/resources/style.css" />" rel="stylesheet">
<title>My title</title>
</head>
<body class ="left-menu">
<div class="menu-wrapper">
<header class="vertical-header">
<div class="vertical-header-wrapper">
<nav class="nav-menu">
<div class="logo">
</div>
</nav>
</div>
</header>
</div>
<div>
</div>
</body>
</html>
I have tried to with
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<spring:url value="/resources/genius/css/bootstrap.min.css" var="bootstrapCss" />
<link href="${bootstrapCss}" rel="stylesheet" />
<spring:url value="/resources/genius/css/font-awesome.min.css" var="fontAwesomeCss" />
<link href="${fontAwesomeCss}" rel="stylesheet" />
<spring:url value="/resources/genius/css/carousel.css" var="carousel" />
<link href="${carousel}" rel="stylesheet" />
<spring:url value="/resources/genius/style.css" var="styleCss" />
<link href="${styleCss}" rel="stylesheet" />
But the tag spring isn't found...
My Dispatcher :
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<!-- DispatcherServlet Context: defines this servlet's request-processing
infrastructure -->
<!-- Enables the Spring MVC #Controller programming model -->
<annotation-driven />
<mvc:resources mapping="/resources/**" location="/resources/genius/" />
<context:component-scan base-package="com.howtodoinjava.app.controller" />
<!-- Resolves views selected for rendering by #Controllers to .jsp resources
in the /WEB-INF/views directory -->
<beans:bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<beans:property name="prefix" value="/WEB-INF/jsp" /> <!-- /WEB-INF/jsp/ -->
<beans:property name="suffix" value="*.jsp" /><!-- .jsp -->
</beans:bean>
</beans:beans>
/WEB-INF/jsp don't work. To display my jsp I had to go through application.properties
spring.mvc.view.prefix=/WEB-INF/view/
spring.mvc.view.suffix=.jsp
logging.level.org.springframework=TRACE
logging.level.com=TRACE
So I wonder if there is not something similar to do for the css.
In a other of tried I test with :
<annotation-driven />
<mvc:resources mapping="/resources/**" location="/classpath:/resources/genius/" />
My Arborescense for this test:
src-----
|main
--------
|java
--------
|resources
---------|resources
---------
| genius
---------|css
---------bootstrap.min.css
---------carousel.css
---------font-awesome.min.css
---------|font
---------|js
---------|images
---------style.css
---------application-properties.txt
--------
|webapp
---------|WEB-INF
The last thing I have tried is to add in my dispatcher ...
Thank you for explaining to me what I forget.
I have an ASP.NET MVC application that uses the Metronic template from keenthemes.
When i use bundles in my layout for my css , it doesnt work well. Most of the icons do not appear
If i switch to direct links then everything is ok.
Javascript is ok.
Bundles config and layout use:
bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
"~/assets/global/plugins/font-awesome/css/font-awesome.min.css",
"~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",
"~/assets/global/plugins/uniform/css/uniform.default.css",
"~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
"~/assets/global/css/components.css",
"~/assets/global/css/plugins.css",
"~/assets/admin/layout2/css/layout.css",
"~/assets/admin/layout2/css/themes/default.css",
"~/assets/admin/layout2/css/custom.css"));
#Styles.Render("~/bundles/metronic-app")
Direct links:
<link href="~/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="~/assets/global/css/components.css" rel="stylesheet" type="text/css" />
<link href="~/assets/global/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css" />
<link id="style_color" href="~/assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css" />
Here are the errors from chrome console:
I should have been using the CssrewriteUrlTransform class in my bundle configuration in order to make the asset's paths absolute.
What worked is this:
bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
"~/assets/global/plugins/uniform/css/uniform.default.css",
"~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
"~/assets/global/css/components.css",
"~/assets/global/css/plugins.css",
"~/assets/admin/layout2/css/custom.css")
.Include("~/assets/admin/layout2/css/layout.css", new CssRewriteUrlTransform())
.Include("~/assets/admin/layout2/css/themes/default.css", new CssRewriteUrlTransform())
.Include("~/assets/global/plugins/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform())
.Include("~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",new CssRewriteUrlTransform()));
Hint from this SO Question
I wanted to create the seperate css files and wanted to use it, Instead of duplicating the css file again.
Using this method i can reuse the cssfilecommon.html by calling it and also if i want some other css required i can add it in the seperate page and call only for that page
<tiles:insertAttribute name="cssfilecommon" /> - common css file
<tiles:insertAttribute name="pagespecific" /> - some other css file
--
can we do this, please let me know if any one tried..
layout file
<!DOCTYPE html>
<html xmlns:tiles="http://www.thymeleaf.org">
<head>
**<tiles:insertAttribute name="cssfile" />**
</head>
<body>
<div tiles:include="header">Header Block</div>
<div tiles:substituteby="body">Body Block</div>
<div tiles:substituteby="footer">Footer Block</div>
</body>
</html>
titles-def.xml file
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
"http://struts.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
<definition name="home" template="basiclayout/layout" >
<put-attribute name="cssfilecommon" value="bout/cssfilecommon"/>
<put-attribute name="header" value="bout/header"/>
<put-attribute name="menu" value="bout/Menu"/>
<put-attribute name="footer" value="bout/footer"/>
</definition>
--
cssfilecommon.html
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="css/jquery-ui-1.10.3.custom.css" th:href="#{css/jquery-ui-1.10.3.custom.css}" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" th:href="#{css/ui.jsd.css}" rel="stylesheet" type="text/css"/>
Yes, with plain tiles you could do this:
Layout file:
<head>
<tiles:insertAttribute name="cssfilecommon" />
<tiles:insertAttribute name="pagespecific" ignore="true" />
</head>
titles-def.xml file:
<definition name="home" template="basiclayout/layout" >
<put-attribute name="cssfilecommon" value="bout/cssfilecommon"/>
<put-attribute name="pagespecific" value="bout/pagespecific"/>
...
</definition>
Note the usage of ignore attribute:
If this attribute is set to true, and the attribute specified by the
name does not exist, simply return without writing anything. The
default value is false, which will cause a runtime exception to be
thrown.
But, as I see you are using Thymeleaf, which probably doesn't support it yet: #17
A other smart suggestion, you can declare in your tiles-def.xml an list and in this list you can simple push all your css files you need in your site, just like this:
<put-list-attribute name="jsList" cascade="true">
<add-attribute value="/Project/basic/css/basic.css" />
<add-attribute value="/Project/case2/css/example2.js" />
<add-attribute value="/Project/special/css/example3.css" />
</put-list-attribute>
after this in your jsp file you can easily iterate over your list with the following (You need the jstl taglib):
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
...
<tiles:importAttribute name="cssList"/>
...
<c:forEach items="${cssList}" var="cs">
<link href="${cs}" rel="stylesheet" type="text/css" media="screen">
</c:forEach>
i know it's like the same what #Slava Semushin say but i would that you know you can work with lists.
For example if you work with jqxwidgets you need to bind special javascripts for the elements and if you don't need all the javascript for each site, you can handle this case, with this suggestion.
I am writing a webpage with CI.I use the latest version. I need to learn how to imply CSS and Javascript files. I use nivoslider , jquery and many css files. I use application directory as
+application
+views
+pages
-home.php
+templates
-header.php
-footer.php
+system
+user_guide.
Can you explain how to enable js and Css files. I made a research but my mind is blown away with the versions of codeigniter.
this is my header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN
""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kırmızı Eğitim Merkezi</title>
<meta name="description" content="Empire - XHTML Template" />
<!-- CSS -->
<link href='./fonts/sansation.css' rel="stylesheet" type="text/css" />
<!-- Get any font from here easily: http://www.google.com/webfonts -->
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet"
type="text/css" />
<link href="./css/nivo-slider.css" rel="stylesheet" type="text/css" />
<!-- UPDATE BROWSER WARNING IF IE 7 OR LOWER -->
<!--[if lt IE 8]><link href="css/stop_ie.css" rel="stylesheet"
type="text/css" /><![endif]--><!-- JAVASCRIPTS -->
<script type="text/javascript" src="./js/jquery.min.js">
</script><script type="text/javascript"
src="./js/jquery-ui-1.8.17.custom.min.js">
</script><script type="text/javascript"
src="./fancybox/jquery.fancybox-1.3.4.pack.js">
</script><script type="text/javascript" src="./js/jquery.nivo.slider.js">
</script><script type="text/javascript" src="./js/jquery.bgslider.js">
</script><script type="text/javascript" src="./js/preloader.js">
</script><script type="text/javascript" src="./js/farbtastic.js">
</script><script type="text/javascript" src="./js/basic.js">
</script>
Can you advice me a way to use them ?
First, you need to place JS and CSS files somewhere like:
+ assets
+ js
+ css
Then you need to call them:
<link href='<?php echo base_url(); ?>assets/css/cssfile.css' rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.min.js">