I am using an EL expression inside JavaScript for rendering Chinese value.
alert('#{bundle.chinese}');
But it renders question marks (?) instead of actual characters.
When I use it outside a script tag in the same XHTML page, e.g.
<p>#{bundle.chinese}</p>
It renders the right chinese Characters. View source shows the html UTF encoded values &....;).
I am using JSF on Facelets.
Sorry, I can't reproduce this with Mojarra 2.0.2 on Tomcat 6.0.20. Here's the JSF page I used:
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<f:loadBundle basename="com.example.i18n.text" var="bundle" />
<h:head>
<title>test</title>
<script>alert('#{bundle.chinese}');</script>
</h:head>
<h:body>
<p>#{bundle.chinese}</p>
</h:body>
</html>
And here is the contents of com/example/i18n/text.properties.
chinese=\u6C49\u8BED\uFF0F\u6F22\u8A9E\u002C\u0020\u534E\u8BED\uFF0F\u83EF\u8A9E\u0020\u006F\u0072\u0020\u4E2D\u6587
The generated HTML source is:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>test</title>
<script>alert('汉语／漢語, 华语／華語 or 中文');</script></head><body>
<p>汉语／漢語, 华语／華語 or 中文</p></body>
</html>
Probably you're doing some stuff a bit differently and/or using a different JSF impl/version. Aren't you somewhere hardcoding/using a non-UTF-8 character encoding? Watch the IDE settings as well.
Related
I have below code in one (main) Facelets page,
<h:panelGroup rendered="true">
<ui:insert>
<ui:include src="/includeSecondPage.xhtml" />
</ui:insert>
</h:panelGroup>
Below is the content in includeSecondPage.xhtml 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"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<script type="text/javascript">
/* <![CDATA[ */
function myScript ()
{
alert("Inside myScript");
}
myScript();
/* ]]> */
</script>
</head>
<f:view>
<body>
<h:form id="secondForm">
<ui:composition>
<h:outputText value="This panel is called using Component Control Component"></h:outputText>
</ui:composition>
</h:form>
</body>
</f:view>
</html>
My Java Script is not getting called in my includeSecondPage.xhtml. Alert box is not popping up in my first (main) page which includes this second page. And there are no Java Script errors in Java Script console.
Anything outside <ui:composition> is discarded during include. Any content outside <ui:composition> is only used by visual editors such as Dreamweaver and should actually only represent "fill up" content in such way so that the include content is "properly" visually represented. If you have looked closer at the JSF-generated HTML output by rightclick, View Source in browser, you'd have noticed that those parts are completely absent in the HTML output.
Put the include content inside <ui:composition>. If you aren't using a visual editor, then also just get rid of anything outside <ui:composition>. Here's how your entire include file can look like:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<script type="text/javascript">
// <![CDATA[
function myScript () {
alert("Inside myScript");
}
myScript();
// ]]>
</script>
<h:outputText value="This panel is called using Component Control Component" />
</ui:composition>
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
I'm new to jsf. I have been trying to do a simple Javascript function with commandbutton. I tried many times but wasn't even able to do an alert message. This is part of my code. Please can anyone guide me, and tell what is wrong, and what I should do to make it run?
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<script type="text/javascript">
function test(){
alert('test');
alert(document.getElementById('frmDashBoard:testbt').value);
}
</script>
</h:head>
<h:body>
<ui:composition template="../../template/commonLayout.xhtml">
<ui:define name="content">
<div>
<h:form id="frmdashboard">
<div name="form_panel" style="width: 984px">
<h:commandButton id="testbt" value="#{message.btn_dashboard_search}" action="#{searchBLAction.doAction}" onclick="test()" />
</div>
</h:form>
</div>
</ui:define>
</ui:composition>
</h:body>
</html>
Apart from this lowercase/uppercase typo (which wouldn't cause the function not being called at all, by the way), your concrete problem is caused because this page is been designed as a template client using <ui:composition>. Any content outside the <ui:composition> tag is ignored during runtime by Facelets. This content is only useful for visual web designers, but once it's compiled and executed during runtime, it's ignored altogether. Instead the composition's content will be inserted in the master template, the commonLayout in your case.
You need to put the <script> element inside an <ui:define> instead, this way it will be taken into the final Facelets composition.
<ui:define name="...">
<script>
...
</script>
...
</ui:define>
Or, better, put the JS function in its own JS file in the /resources folder and reference it as follows:
<ui:define name="...">
<h:outputScript name="some.js" target="head" />
...
</ui:define>
Thanks to the target="head", it'll automatically be relocated into the HTML <head> during building the view.
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
Any thing defined outside ui:composition is ignored.So place your content inside this tag and it will work:
Something like this:
<ui:composition template="/WEB-INF/tags/layout.xhtml">
<ui:include src="/tags/common.xhtml"></ui:include>
<ui:define name="content">
<h:outputScript name="validation.js" library="javascript"></h:outputScript>
I have checked many questions here but none has my answer. I appreciate if you direct me to the right path.
I like to make a new symbol (not a font or related to any alphabet) like creating a new language alphabets that could be recognized or translated in a browser in form of html or javascript code.
In other words, assigning single custom character for multiple characters.(e.x 1 ch translates into 5 ch)
I assume I need to make the font first and then assign that character. What programs do you suggest or what is the best approach?
Edit:
A better example:
Make a new character like ¢ (cent) that has entity name --> & c e n t; and entity number --> & # 1 6 2;
Edit 2: Thank you all for your replies. I'm trying to check your links and suggestions.As I understand, there might be an issue of browser compatibility. So how about make new symbols in a text file saved on server and when the user views the file, javascript converts those symbols into a word or other standard characters?
Edit3: Sorry for any confusion guys, you are all awesome. This example might clear things.
make a new symbol that assigns to "AB". So one character that translates into two characters?
Edit4:
This is based on Jared answer. This does work for Z and P. Now how should I add my custom font to this file (replace Z and P with my own)?
Assuming Z and P are my custom made symbols
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ENTITY Z "AB">
<!ENTITY P "DE">
...
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Extending XHTML - Example 1</title>
</head>
<body>
<p>My symbols are &Z; and &P;</p>
</body>
</html>
This may be an option for you, I'm not quite sure. Pretty much, if you use XHTML and/or XLST, you could possibly achieve what you're looking for in custom-defined characters. For example:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ENTITY mailto "mailto:">
<!ENTITY username "gabriel">
<!ENTITY arobase "#">
<!ENTITY hostname "gabsoftware">
<!ENTITY tld ".com">
<!ENTITY email "&username;&arobase;&hostname;&tld;">
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Extending XHTML - Example 1</title>
</head>
<body>
<p>My email is &email;</p>
</body>
</html>
http://jfcoder.com/test/entities.xhtml
You'll see the SGML ENTITY element, which by the way I believe HTML5 is no longer going to belong to anymore. Whether or not you can embed an image in those entities or through an XLST transformation to achieve your goal I haven't figured out yet.
For many more examples and options, see this page:
Extending XHTML with XML, XSLT, entities, CDATA sections and JavaScript
You have to use the SGML Entity declaration to create a new character entity. This should work in all languages that inherit from SGML including HTML and XML, but I would be sure to test this in all supported user agents just to be sure.
http://en.wikipedia.org/wiki/XML_entity
If you're using standard characters (a-Z, A-Z, 0-9, !, #, #, $, etc), ,you could make a PHP variable that has the translation as the page is being rendered (JavaScript is after the page is rendered/downloaded).
<?php
$from = "A";
$into = "ABCD";
$content = "This is A whole lot of page content";
echo preg_replace("$from, $into, $content);
// will output "This is ABCD whole lot of page content"
?>
Could work with special fonts too, i'd imagine, or even swapping $from into <img src=pic/of/chars.png" />.
I am aware of this post and I double checked all the possibilities there.
I'm using JSF 2.0 with Mojarra implementation on Glassfish 3.
I'm trying to use two simple <h:commandLink> tags to change the application language.
This is the .xhtml page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>
<h:outputText value = "#{appMessage['page.welcome']}" />
</title>
<f:metadata>
<f:event type = "preRenderView" listener = "#{sessionController.changeLanguage}" />
</f:metadata>
</h:head>
<h:body>
<h1><h:outputText value = "#{appMessage['text.slide.welcome']}" /></h1>
<h:form id = "fm-language">
<h:commandLink action = "#{sessionController.changeLanguage('en')}" value = "#{appMessage['link.english']}" />
<h:commandLink action = "#{sessionController.changeLanguage('de')}" value = "#{appMessage['link.german']}" />
</h:form>
</h:body>
This is the HTML code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Maze Project</title>
</head>
<body>
<h1>Welcome</h1>
<form id="fm-language" name="fm-language" method="post" action="/maze/welcome.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="fm-language" value="fm-language" />
<script type="text/javascript" src="/maze/javax.faces.resource/jsf.js.xhtml?ln=javax.faces">
</script>
English
Deutsch
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="8038443616162706480:-1387069664590476821" autocomplete="off" />
</form>
</body>
When pressing a commandLink nothing at all happens. There is no request sended to the server and this following Java Script error is thrown:
mojarra is not defined
The bean methods are correctly called and work fine in the rest of the appliction.
The source and generated HTML output looks fine, you have there a <h:head> in the JSF source (otherwise JSF wasn't able to auto-include any CSS/JS files), and the javax.faces:jsf.js script is present in the HTML output.
You said, you got a JS error that mojarra is not definied. That can only mean that the following auto-generated script
<script type="text/javascript" src="/maze/javax.faces.resource/jsf.js.xhtml?ln=javax.faces">
</script>
did not result in a valid response. That can in turn only mean that you've a Filter which is mapped on /* or *.xhtml which is restricting the jsf.js resource request in some way. Perhaps some homegrown authentication filter which is not doing its job entirely right. Try opening
http://localhost:8080/maze/javax.faces.resource/jsf.js.xhtml?ln=javax.faces
in your browser to see what it actually retrieved (or use the web developer tools to check the response). If it's indeed not the proper response and the problem is indeed in the Filter, then you probably need to rewrite it as such that it should continue the chain when the request URI starts with ResourceHandler.RESOURCE_IDENTIFIER.
E.g.
HttpServletRequest req = (HttpServletRequest) request;
if (req.getRequestURI().startsWith(req.getContextPath() + ResourceHandler.RESOURCE_IDENTIFIER)) {
chain.doFilter(request, response); // Let it continue.
return;
}
Try to watch what happens in Firebug or something similiar, to see if there is actually a server communication.
And since it is a commandLink, look if there are any javascript errors on the page.
You say, you don't get any INFO logs, so I think the request doesn't even get to your application.
(I don't see a closing html tag in your xhtml file, maybe you just didn't pasted it.)
I have a web application that is dynamically loading PDF files for viewing in the browser.
Currently, it uses "innerHTML" to replace a div with the PDF Object. This works.
But, is there a better way to get the ID of the element and set the "src" or "data" parameter for the Object / Embed and have it instantly load up a new document?
I'm hoping the instance of Adobe Acrobat Reader will stay on the screen, but the new document will load into it.
Here is a JavaScript example of the object:
document.getElementById(`divPDF`).innerHTML = `<OBJECT id='objPDF' DATA="'+strFilename+'" TYPE="application/pdf" TITLE="IMAGING" WIDTH="100%" HEIGHT="100%"></object>`;
Any insight is appreciated.
I am not sure if this will work, as I have not tried this out in my projects.
(Looking at your JS, I believe you are using jQuery. If not, please correct me)
Once you have populated the divPDF with the object you might try the code below:
$("objPDF").attr({
data: "dir/to/newPDF"
});
Again, I am not sure if this will work for your particular needs but if you attach this code to an event handler you can switch out the data of the object.
You could also wrap it in a function to be used over and over again:
function pdfLoad(dirToPDF) {
$("objPDF").attr({
data: dirToPDF
});
}
If the handler for the PDF is acrobat (it doesn't have to be), it exposes a JS interface that is documented here:
http://www.adobe.com/devnet/acrobat/pdfs/js_api_reference.pdf
See if you can call openDoc(urlToPdf) on document.getElementById('objPDF') -- even if this works, it only works when Acrobat is being used to handle 'application/pdf'
#lark
A slight correction:
$('#objPDF').attr('data','dirToPDF');
The # specifies the objPDF is an ID and not an element name. Though I still don't know if this will work.
#Tristan
Take a look at the jQuery Media plugin. It mentions support for PDF as well, though I have never used it.
Open a PDF-Link in a external window PDFN with a external PDF-Reader.EXE:
Clicking on the following button:
<FORM action="">
<INPUT type="button" value="PDF file"
onclick="window.open('http://www.Dku-betrieb.eu/Pdfn.html',
'PDFN', 'width=620, height=630')">
</FORM>
opens this frameset Pdfn.html in an external window:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
<meta http-equiv="refresh" content="12;url=http://www.dku-betrieb.eu/Pdfn1.html">
<head>
<title>Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset>
<frame src="http://www.dku-betrieb.eu/File.pdf" frameborder=0 name="p1">
</frameset>
</HTML>
which refreshes in 12 seconds to the download of the PDF-Reader:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
<head>
<title>Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset >
<frame src="http://www.dku-betrieb.eu/PDFReader.exe" frameborder=0 name="p2">
</frameset>
</HTML>
showing as result the PDF-file in the external window PDFN.
function pdfLoad(datasrc) {
var x = document.getElementById('objPDF');
x.data = datasrc;
}
This worked for me