I have started to maintain a legacy JSF application. It uses myFaces 1.1.x and tomahawk 1.1.6. I need to print META tag X-UA-Compatible as the first element of HEAD element otherwise IE will ignore it.
<%#page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%#taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%#taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%#taglib prefix="t" uri="http://myfaces.apache.org/tomahawk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<f:view>
<t:documentHead>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
It will generate
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="/Viewer/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/15311471/navmenu.jscookmenu.HtmlJSCookMenuRenderer/JSCookMenu.js"><!--
//--></script>
<script type="text/javascript" src="/Viewer/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/15311471/navmenu.jscookmenu.HtmlJSCookMenuRenderer/MyFacesHack.js"><!--
//--></script>
<script type="text/javascript"><!--
var myThemeMiniBlackBase='/Viewer/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/15311471/navmenu.jscookmenu.HtmlJSCookMenuRenderer/ThemeMiniBlack/';
//--></script>
<script type="text/javascript" src="/Viewer/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/15311471/navmenu.jscookmenu.HtmlJSCookMenuRenderer/ThemeMiniBlack/theme.js"><!--
//--></script>
<link rel="stylesheet" href="/Viewer/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/15311471/navmenu.jscookmenu.HtmlJSCookMenuRenderer/ThemeMiniBlack/theme.css" type="text/css" />
<script type="text/javascript" src="/Viewer/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/15311471/popup.HtmlPopupRenderer/JSPopup.js"><!--
//--></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
How can I force the META tag to be the first element? I tried plain HTML HEAD element but it did not work either.
I need
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
Update:
Some of these javascripts and styles are rendered because of this tag:
<t:jscookMenu theme="ThemeMiniBlack" layout="hbr" immediate="true">
The remaining javascript comes from
<t:popup closePopupOnExitingElement="true" closePopupOnExitingPopup="true"
displayAtDistanceX="10" displayAtDistanceY="20" styleClass="popup">
The question is if I can enforce that what I put to t:documentHead has a precedence? I worry I will need to write my custom tag.
I would give a try to adding the meta tag yourself in a custom java filter.
<filter>
<filter-name>MetaTagsFilter</filter-name>
<filter-class>com.yournamespace.MetaTagsFilter</filter-class>
</filter>
Then do a filter mapping for the JSF servlet:
<filter-mapping>
<filter-name>MetaTagsFilter</filter-name>
<servlet-name>FacesServlet</servlet-name>
</filter-mapping>
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
In your filter logic, add the meta tag, after the servlet has performed the processing, kind of this:
#Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain filterChain) throws IOException, ServletException {
HtmlResponseWrapper capturingResponseWrapper = new HtmlResponseWrapper(
(HttpServletResponse) response);
filterChain.doFilter(request, capturingResponseWrapper);
if (response.getContentType() != null
&& response.getContentType().contains("text/html")) {
// Try this https://stackoverflow.com/a/32830377/1199132
capturingResponseWrapper.addHeader("X-UA-Compatible", "IE=edge");
// Or this, that way you have more control over WHERE it gets written
String content = capturingResponseWrapper.getCaptureAsString();
// replace stuff here (find the <head></head> tags and add the <meta> at the very beginning)
System.out.println(replacedContent);
response.getWriter().write(replacedContent);
}
}
See also:
Modify html response using filter
Is doFilter() executed before or after the Servlet's work is done?
What is the difference between creating JSF pages with .jsp or .xhtml or .jsf extension
The Essentials of Filters (Oracle)
Related
I recently took a course on back-end web developing.
As the title says, I don't get how can I use a header partial for the whole website but have different titles for each page. (because is included in the tag)
Is there any trick?
1st) In your Express route:
app.get("/", function(req, res){
res.locals.title = "Abel's Home Page"; // THIS LINE IS KEY
res.render("home.ejs");
});
2nd) In your views/home.ejs file:
<% include partials/header.ejs %>
3rd) In your views/partials/header.ejs file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title> <!-- THIS LINE IS KEY -->
<link rel="stylesheet" href="../style.css">
<link rel="shortcut icon" href="../logo_sm.png" type="image/x-icon">
</head>
<body>
Each page that includes the partial is free to pass data to said partial through parameters. See here for an example.
I'm following this tutorial: http://www.thymeleaf.org/doc/layouts.html (got to Thymeleaf Layout Dialect section).
In there you can find an example:
<!DOCTYPE html>
<html>
<head>
<!--/* Each token will be replaced by their respective titles in the resulting page. */-->
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title>
...
</head>
<body>
<!--/* Standard layout can be mixed with Layout Dialect */-->
<div th:replace="fragments/header :: header">
...
</div>
<div class="container">
<div layout:fragment="content">
...
</div>
<div th:replace="fragments/footer :: footer">© 2014 The Static Templates</div>
</div>
</body>
</html>
Footer and header are replaced by th:replace tag in above example, while <head> has <title> tag in layout file.
Basically, I want to replace whole <head> tag with th:replace.
Therefore, I have:
My layout file:
<!DOCTYPE html>
<html>
<head th:replace="/html/components/head :: head">
</head>
<body>
<div layout:fragment="content">
</div>
...
<div th:replace="/html/components/footer :: footer" />
</body>
<html>
My content file:
<!DOCTYPE html>
<html layout:decorator="/html/layouts/layout">
<head>
<title>My content title</title>
</head>
<body>
<div layout:fragment="content">
...
</div>
</body>
</html>
And finally my /html/components/head.htm file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:fragment="head">
<meta charset="utf-8" />
<title layout:title-pattern="$CONTENT_TITLE">Layout Title should be replaced by Content Title!</title>
...
</head>
<body>
</body>
</html>
Content is alright. Footer and head are included (replaced) from files as expected but page title is blank!
I get:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
...
What's wrong?
Finally, I've found a way to achieve what I wanted.
In layout file <title> tag must stay. All other tags I grouped with <object> tag and annotated it as follows:
<head>
<title layout:title-pattern="$CONTENT_TITLE">Layout Title will be replaced by Page Title!</title>
<object th:include="/html/components/head :: head" th:remove="tag" />
</head>
In my html/components/head.htm file I had to remove <title> tag so it won't be duplicated after include.
<head th:fragment="head">
<meta charset="utf-8" />
<!-- NO TITLE TAG HERE -->
...
</head>
This way head fragment is included in <object> tag and thanks to th:remove="tag" <object> tag gets removed and my final HTML output is:
<head>
<title>My content title</title>
<meta charset="utf-8" />
<!-- NO TITLE TAG HERE -->
...
</head>
Obviously, I removed NO TITLE TAG HERE message too, once I got it working.
I think I found a slightly less verbose way to for using th:replace and th:fragment together, e.g. to include common <head> metadata and static resource includes in your pages.
Put the th:remove="tag" in the fragment definition, so you don't have to repeat the th:remove="tag" everytime including it.
fragment_head.html
<thymeleaf xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
th:fragment="head" th:remove="tag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" th:href="#{/css/vendor/bootstrap.min.css}"/>
</thymeleaf>
mypage.html
<head>
<thymeleaf th:replace="fragment_head :: head" />
</head>
You can replace whole head tag.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="pl" th:replace="fragments/head :: head">
</head>
<body>
...
</body>
</html>
resources/templates/fragments/head.html:
<head lang="pl">
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.5/css/bootstrap.min.css"
th:href="#{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"
th:src="#{/webjars/jquery/2.1.4/jquery.min.js}"></script>
<link href="../static/css/mycss.css"
th:href="#{css/mycss.css}" rel="stylesheet" media="screen"/>
</head>
I'm using a simple payment set up on an embedded flow.
Everything works well, except the return and cancel urls are being loaded into the lightbox, not the parent window, so I end up with a greyed out window with the return url page in it, and the user can't do anything.
As an example, here's the exact code from my cancel page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://www.paypalobjects.com/js/external/dg.js"></script>
</head>
<body>
<div class="center">
<p>Unable to complete payment, due to either a payment cancelation, or an error.</p>
<p>No funds were transfered.</p>
</div>
<script type="text/javascript" charset="utf-8">
dgFlow = top.dgFlow || top.opener.top.dgFlow;
dgFlow.closeFlow();
top.close();
</script>
</body>
When I check out the console output, it says
top.opener is null
and it's referring to the line
dgFlow = top.dgFlow || top.opener.top.dgFlow;
Should the return URL not load into the parent window instead?
Thanks for taking a look.
I have two meta tag in _Layout.cshtml master page and now i want to add meta tags in someone.cshtml view page.
and i also try with this code
put in _layout.cshtml master page #RenderSection("metatags",false);
put in someone.cshtml like #section metatags { <meta ... /> }
but not get success.
and also try with add meta tag jquery but not worked fine.
It should work.
Here's my master page _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
#RenderSection("metatags", false)
<title>My ASP.NET Application</title>
</head>
<body>
#RenderBody()
</body>
</html>
Here's the index.cshtml file
#section metatags
{
<meta name="test" content="test"/>
<meta name="test2" content="test"/>
}
<div>Page content</div>
The result
<html>
<head>
<meta charset="utf-8">
<meta name="test" content="test">
<meta name="test2" content="test">
<title>My ASP.NET Application</title>
</head>
<body>
<div>Page content</div>
</body>
</html>
I found a way that works for now.
This solution mostly use when multiple master page.
In the controllers / action assign whatever meta info you need for that view.
ViewBag.Title = "some title";
ViewBag.MetaDescription = "some description";
In the View or master page get whatever meta info you need for that view.
#if(ViewBag.MetaDescription != null)
{
<meta name="description" content="#ViewBag.MetaDescription" />
}
#if(ViewBag.MetaKeywords != null)
{
<meta name="keywords" content="#ViewBag.MetaKeywords" />
}
If are using nested layouts you'll need to follow this guideline:
#RenderSection in nested razor templates
The technique you're using should work, if it is not, maybe that's the reason.
But looking at the intended use in your own answer, if you only need to modify the keywords and description tags there are apis in NopCommrece for that.
In your master layout:
<meta name="description" content="#(Html.NopMetaDescription())" />
<meta name="keywords" content="#(Html.NopMetaKeywords())" />
and in the client cshtml files
#{
Html.AddMetaDescriptionParts(Model.MetaDescription);
Html.AddMetaKeywordParts(Model.MetaKeywords);
}
There are plenty of samples for this in the NopCommerce code.
here is a good sample on how to dynamically creating meta tags in asp.net mvc:
public string HomeMetaTags()
{
var strMetaTag = new StringBuilder();
strMetaTag.AppendFormat(#"<meta content='{0}' name='Keywords'/>","Home Action Keyword");
strMetaTag.AppendFormat(#"<meta content='{0}' name='Descption'/>", "Home Description Keyword");
return strMetaTag.ToString();
}
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
ViewBag.MetaTag = HomeMetaTags();
return View();
}
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
#Html.Raw(ViewBag.MetaTag)
</head>
Can anyone tell me how it is possibile that the following layout in a Rails 4 app
# app/views/layout/login.html.erb
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>PIPPO</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<link href="/assets/login.css" media="all" rel="stylesheet" />
<script src="/assets/login.js"></script>
<%= csrf_meta_tags %>
</head>
<body>
<div class="main-content">
<%= yield %>
</div>
</body>
</html>
With the following controller
class SessionsController < ApplicationController
layout 'login'
...
def destroy
Session.find(session[:id]).close
reset_session
respond_to do |format|
flash[:success] = t('sessions.logout')
format.html { redirect_to login_url }
end
end
end
and routes
...
get 'login', to: 'sessions#new', as: 'login'
get 'logout', to: 'sessions#destroy', as: 'logout'
...
produces the following HTML once I click on <%= link_to 'logout', logout_path %>?
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>PIPPO</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<link href="/assets/application.css" media="all" rel="stylesheet" />
<script src="/assets/application.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="l9+umk+wjpXY4UFiKEeuQkGgMvjbbZ2uDxyJHowTJFo=" name="csrf-token" />
</head>
Am I missing anything here? It is two days I'm trying to figure this out.
Why is it using the head from the main layout instead of the one in login?
Thanks for your help.
UPDATE - Forgot to mention my log file states:
Rendered sessions/new.html.erb within layouts/login (1.4ms)
As per the layout name given in the question, i.e.,
app/views/layout.login.html.erb
There are couple of things wrong here:
layouts should be placed in app/views/layouts folder
File name should be login.html.erb and not layout.login.html.erb
In your case, Rails could not find login.html.erb in app/views/layouts, it rendered the default layout app/views/layouts/application.html.erb.