Hi making my first page using Struts2.
This is the easy code :
<%# taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/interfaccia.css" />
<link rel="stylesheet" type="text/css" href="css/links.css" />
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/profile.css" />
<link rel="stylesheet" type="text/css" href="css/affitta.css" />
<title>
Struts2 - The Sinfonet Portal
</title>
</head>
<body>
<s:div cssStyle="contenitore">
<s:div cssStyle="header">
<s:div cssStyle="header1">
<img src="img/logosw.png" alt="Logo Sinfonet" />
</s:div>
<s:div cssStyle="header2">
<img src="img/band1.jpg" alt="Flag 1" class="photoband" />
<img src="img/band2.jpg" alt="Flag 2" class="photoband" />
<img src="img/band3.jpg" alt="Flag 3" class="photoband" />
</s:div>
</s:div>
<s:div cssStyle="center">
<s:div cssStyle="menu">
<s:div cssStyle="menu_table">
<s:label cssStyle="menu_title" value="Login" />
<s:label cssStyle="menu_span" value="Username" />
<s:textfield />
<s:label cssStyle="menu_span" value="Password" />
<s:textfield />
</s:div>
</s:div>
</s:div>
</s:div>
</body>
</html>
I don't know why it doesnt get the right CSS style (in fact the page looks strange).
What am I wrong?
Have you checked that all of your CSS files are served properly (i.e., they aren't resulting in 404 errors)?
You could try out your page with <div instead of <s:div and see what you get.
I was having a same problem, after parsing through struts css seem to vanish.
Solution: Just add folder name before style in href.
e.g:
Before:
href="style.css"
After:
href="foldername/style.css"
Seems to be nothing Struts2-specific. As Steven answered, check that you get the css-files served if you enter the URL they should be at directly. If not, it may be that you'll have to take a look in your WebContent/WEB-INF/web.xml file if you're directing the requests wrong.
Try something like this
<link href="<s:url value="css/interfaccia.css"/>" rel="stylesheet" type="text/css"/>
You Have to mention the whole path in every page
like..
<link rel="stylesheet" type="text/css" href="<s:url value="/css/style.css" />" />
for images
<img id="logo" src="<s:url value="/images/logo.png" />" />
Related
When i try to redirect to my task detail page and i want to refresh it i got an error 404 File not found from my index.html because my path to stylesheet and path to scripts.js changes from localhost:8080/styles.css to localhost:8080/tasks/style.css and i dont know why does that happen?
My html code:
<!doctype html>
<html class="no-js" lang="">
<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 href='http://fonts.googleapis.com/cssfamily=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- build:css css/application.css -->
<link rel="stylesheet" href="styles.css">//BREAKS HERE
<!-- endbuild -->
</head>
<body>
<main class="site-content" id="main">
<p>Main content</p>
</main>
<!-- build:js js/application.js -->
<script src="scripts.js"></script>//AND BREAKS HERE
<!-- endbuild -->
</body>
I am using react-router but i am pretty new in react so i dont know if problem is here.
Routes:
<Route handler={App}>
<Redirect from="/" to="login" />
<Route name="login" path="login" handler={Login} />
<Route name="dashboard" path="dashboard" handler={Dashboard} />
<Route name="task" path="/tasks/:id" handler={Task} />
</Route>
When i am on dashboard refresh works fine but when i go to tasks/:id and refresh page i get this error:
22821:14 GET http://localhost:8080/tasks/styles.css
22821:27 GET http://localhost:8080/tasks/scripts.js
Failed to load a resource: the server responded with status of 404
You need to set the path in the src of your tags correctly.
<!-- build:css css/application.css -->
<link rel="stylesheet" href="/styles.css">//BREAKS HERE
<!-- endbuild -->
<!-- build:js js/application.js -->
<script src="/scripts.js"></script>//AND BREAKS HERE
<!-- endbuild -->
Notice the '/'. It tells the browser to look from the root of the domain name. If you leave that off... it appends it to current path of the url.
The App component has no path and the task route's path shouldn't begin with a / in this kind of situation. See if this works:
<Route path="/" handler={App}>
<DefaultRoute handler={Login} />
<Route name="login" path="login" handler={Login} />
<Route name="dashboard" path="dashboard" handler={Dashboard} />
<Route name="tasks" path="tasks/:id" handler={Task} />
</Route>
I tried to replace favicon.ico in /web-app/images/ folder but it doesn't work : my site still has the usual Grails favicon. What do I need to do more?
try to change views\layout\main.gsp
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
<link rel="shortcut icon" href="${createLinkTo(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
<g:layoutHead />
<g:javascript library="application" />
</head>
<body>
<div id="spinner" class="spinner" style="display:none;">
<img src="${createLinkTo(dir:'images',file:'spinner.gif')}" alt="Spinner" />
</div>
<div class="logo"><img src="${createLinkTo(dir:'images',file:'grails_logo.jpg')}" alt="Grails" /></div>
<g:layoutBody />
</body>
</html>
and comment
<link rel="shortcut icon" href="${createLinkTo(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
or clean your browser's cache. ;-)
With the grails assets plugin you must use:
<head>
...
<asset:link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
Put favicon.ico file to PROJECT/grails-app/assets/ folder,
add to UrlMappints
class UrlMappings {
static mappings = {
......
"/favicon.ico" (uri: "/assets/favicon.ico")
}
}
Place your icon file in this path:
grails-app\assets\images\favicon.ico
Then add this to the head element of your html:
<link rel="shortcut icon" href="/assets/favicon.ico">
I went through possible set of options from google and tried to include my 'js' and 'css' in head section how ever when I did page source the css and js files are getting append in body section, below are my code snippet:
<h:head profile="http://www.w3.org/2005/10/profile">
<META charset="UTF-8" lang="en-US" />
<link rel="icon" type="image/png"
href="#{resource['image:Friendsmirror.ico']}" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-ui.min.js" />
etc......
</h:head>
and output as below:
Below is the complete code:
Template:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
lang="#{languageBean.language}">
<!-- Enables CTRL+SHIFT+D for activating Facelets debug window -->
<ui:debug />
<f:view locale="#{languageBean.language}">
<f:loadBundle var="messageResource" basename="MessageResource" />
<h:head profile="http://www.w3.org/2005/10/profile">
<META charset="UTF-8"/>
<link rel="icon" type="image/png"
href="#{resource['image:Friendsmirror.ico']}" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-ui.min.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.tooltipster.min.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.tokeninput.js" />
<!-- <script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/connect_dashboard.js?some_var_to_bust_cache=24312341" />-->
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/moment.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/livestamp.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.watermark.min.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.jeditable.mini.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.autocomplete.js" />
<!-- For Input Range and Overlay -->
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.tools.min.js" />
<!-- slimScroll plugin -->
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.slimscroll.min.js" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/main.css?some_var_to_bust_cache=24312340" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/common.css?some_var_to_bust_cache=24312342" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/connect.css?some_var_to_bust_cache=24312340" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/token-input-facebook.css?some_var_to_bust_cache=24312345" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/tooltipster.css?some_var_to_bust_cache=24312340" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/skilltimeline.css" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.autocomplete.css" />
<f:facet name="first">
<meta http-equiv="X-UA-Compatible"
content="EmulateIE8,IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Connect" />
<meta name="keywords"
content="timeline, 3d, css, css3, css-only, transitions, responsive, fluid" />
<meta name="author" content="FriendsMirror" />
<title><ui:insert name="title">#{messageResource['expensecontrol.main.title']}</ui:insert></title>
</f:facet>
</h:head>
<h:body>
<p:outputPanel styleClass="content">
<h:outputScript target="head" name="connect_dashboard.js" library="js"/>
<!--<p:ajaxStatus styleClass="ajaxLoader" id="ajaxStatusPanel">
<f:facet name="start">
<h:graphicImage name="ajax-loader.gif" library="image" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
<f:facet name="error">An error has occurred!</f:facet>
</p:ajaxStatus>-->
<ui:insert name="header" />
<ui:insert name="body" />
</p:outputPanel>
</h:body>
</f:view>
</html>
and using template as:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
template="/templates/common_layout.xhtml">
<ui:define name="title">
Jayaram Pradhan
</ui:define>
<ui:define name="header">
<ui:include src="/templates/connectHome_Banner.xhtml" />
</ui:define>
<ui:define name="body">
<p:panel header="TEST Goes Here">
<h:form>
<h:link value="Click Here" outcome="connect">
<f:param name="sessionKey" value="1234" />
</h:link>
</h:form>
</p:panel>
</ui:define>
</ui:composition>
I have tried with
<h:outputScript target="head" name="connect_dashboard.js" library="js"/>
<h:outputStylesheet/>
as well <script> and but still js or css getting append to body only.
I have assumed that if I have the basic setup of...
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
</head>
then, later in the code if I include, say, a header with a button that uses a 'plus' data-icon...
<div data-role="header" data-position="inline">
<h1>Shopping List</h1>
additem
</div>
then the buttons would show up with the 'plus' data-icon. The buttons show up, but without the data-icon. What am I missing in my setup?
The link should have data-role="button" shouldn't it?
i also faced this prob, but then i tried to add this code into the head. the icon now can be displayed.
<link rel="stylesheet" type="text/css" media="screen"
href="${pageContext.request.contextPath}/theme/css/jquery/ui-lightness/jquery-ui-1.8.6.custom.css" />
add
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
I have the following line:
<link href="<%= Links.Content.Site_css %>" rel="stylesheet" type="text/css" />
which is rendered to
<link href="Views/Shared/%3C%25=%20Links.Content.Site_css%20%25%3E" rel="stylesheet" type="text/css" />
So expression is not executed. If I remove quotes:
<link href=<%= Links.Content.Site_css %> rel="stylesheet" type="text/css" />
expression is executed but markup becomes xhtml incompatible. What is the right way to fix this problem?
Just remove the runat="server" on your tag and it should fix it.
Use single quotes instead of double quotes.
<link href='<%= Links.Content.Site_css %>' rel="stylesheet" type="text/css" />
For that special case, I'd use Css helper method from MVC futures assembly:
<%:Html.Css(Links.Content.Site_css) %>
This might be a workaround
<link href=<%= '"' + Links.Content.Site_css + '"' %> rel="stylesheet" type="text/css" />
(I have no experience with ASP, sorry if that's just invalid syntax)