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>
Related
First of all I have seen every single question stating the same issue on Stack and non of them applied to mine
I was building my First PhoneGap App and i want to use jQueryMobile libraries
anyways, the JQuery Styles is not working properly,
My Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
btn1
<p>I Am Now A Mobile Developer!!</p>
btn2
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<script type="text/javascript" src="cordova.js"/>
<script type="text/javascript" src="./js/jquery-1.12.0.min.js"/>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"/>
<script type="text/javascript" src="js/index.js"/>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And the results are
as you can see the button inline and corner all attributes worked fine but still that is not the expectedP
You didnt reference them properly
Remove the dot. I following the folder structure of where your css files are, your java script files should be here /js not ./js
So reference like this
[code]
[/code]
i have created a theme in themeroller and used like this in my app
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="assets/css/jquery.mobile.1.3.2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/pinkhash.min.css" />
<link rel="apple-touch-startup-image" href="assets/img/logo.png" />
<link rel="apple-touch-icon" href="assets/img/logo.png" />
</head>
On first load, the new theme is used, but when i login to the app and logout, the old default blue theme appears, why is this?
Do not use jQuery Mobile's default CSS file. Instead use jQuery Mobile's structure CSS file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- YOUR CUSTOM THEME CSS -->
<link rel="stylesheet" href="your_custom_theme.css" />
<!-- JQUERY STRUCTURE CSS -->
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/pinkhash.min.css" />
<link rel="apple-touch-startup-image" href="assets/img/logo.png" />
<link rel="apple-touch-icon" href="assets/img/logo.png" />
</head>
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.
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" />" />