Here's a snippet of my code!
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Associate Management Pool</title>
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
</h:head>
Related
I made Rails app and released.
I set ogp and twitter card by using meta-tags gem.
However,Twitter Cards Validator could not find any meta tags.
The browser shows codes blow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美味しい和菓子が見つかるメディア | MOMIJI</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta name="description" content="美味しい和菓子が見つかるメディア">
<meta name="keywords" content="和菓子, スイーツ, momiji">
<link rel="canonical" href="https://momiji.work/articles">
<meta property="og:title" content="MOMIJI">
<meta property="og:description" content="美味しい和菓子が見つかるメディア">
<meta property="og:type" content="website">
<meta property="og:url" content="https://momiji.work/articles">
<meta property="og:image" content="http://momiji.work/assets/wa_1.jpg">
<meta property="og:site_name" content="MOMIJI">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MOMIJI">
<meta name="twitter:description" content="美味しい和菓子が見つかるメディア">
<meta name="twitter:image" content="http://momiji.work/assets/wa_1.jpg">
<meta name="twitter:site" content="#Justin0370">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="jcjt5ya59ZrydFwnxiBcOdi7w3O5sXXSe6QXktFwt6uygvwi/DYmaTgV0yx0HbP/P8l1Zvsz5x5APEjlzsfE5A==" />
<link rel="stylesheet" media="all" href="/assets/application-c4248fae82b61852d60924641256d5953280f16c38ed2795e77c3a303f6fa588.css" data-turbolinks-track="true" />
<script src="/assets/application-0d8e513de520a20d78d2ba43d84d1c021d3937e16f681fee552500eb92297b4e.js" data-turbolinks-track="true"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Twitter Card Validator shows
INFO: Page fetched successfully
WARN: No metatags found
If you can know why my app can't show twitter card, answer this question, please.
require 'open-uri'
require 'json'
#result = JSON.parse(open(URI.parse(url)).read)
757: unexpected token at '<!DOCTYPE html> <html lang='en'> <head><script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script> <title>Fundly | Search </title> <meta charset='utf-8'> <meta content='initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width' name='viewport'> <script src="//cdn.optimizely.com/js/3536001.js" type="text/javascript"></script> <meta content="authenticity_token" name="csrf-param" /> <meta content="V3GRiKIwWG9+WxN7VsiNtqOnkWu1CkuutIqJ00CQLrQ=" name="csrf-token" /> <meta name='description'> <meta content='noindex' name='robots'> <!-- Facebook OpenGraph metadata --> <meta content='Search' property='og:title'> <meta content='website' property='og:type'> <meta content='https://fundly.com/search' property='og:url'> <meta content='http://fundly.com/assets/logos/v2/fundly_logo_vertical_lockup.png' property='og:image'> <meta content='Fundly' property='og:site_name'> <meta content='Start Your Search' property='og:description'> <meta content='148669528535835' property='fb:app_id'> <!-- End Facebook OpenGraph metadata --> <link href="//doapv6pcsx1wa.cloudfront.net/assets/favicon_heart-ac3d0cee1ff7eb05cfec822b455dc319.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <link href="//fonts.googleapis.com/css?
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 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.
Why do I lose all CSS and JS when I refresh page that has templating in JSF?
My Template :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" class="top">
<ui:insert name="top">
<h:form>
<h:commandButton value="Home" action="#{auth.goHome()}"/>
<h:commandButton value="Logout" action="#{auth.logout}"/>
</h:form>
</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>
</html>
Child Page:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition template="/contentTemplate.xhtml" >
</ui:composition>
</h:body>
</html>
**GET http://localhost:11032/Integration/Common/resources/css/default.css 404 (Not Found) welcome.xhtml:5
GET http://localhost:11032/Integration/Common/resources/css/cssLayout.css 404 (Not Found)**
for start try to replace
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
(and the other css) with
<h:outputStylesheet name="css/default.css" target="head" /> (do same for the other css)
If that wont work you can try using #{facesContext.externalContext.requestContextPath}
<link href="#{facesContext.externalContext.requestContextPath}/css/default.css" rel="styleSheet" type="text/css"/>