I want to put a packman game on my *.xhtml page.(I am using jsf 2 and primefaces 3.5)
However,
when I "translated" the html page in xhtml I get an error at this script:
<script>
var el = document.getElementById("pacman");
if (Modernizr.canvas && Modernizr.localstorage &&
Modernizr.audio && (Modernizr.audio.ogg || Modernizr.audio.mp3)) {
window.setTimeout(function () { PACMAN.init(el, "./"); }, 0);
} else {
el.innerHTML = "Sorry, needs a decent browser<br /><small>" +
"(firefox 3.6+, Chrome 4+, Opera 10+ and Safari 4+)</small>";
}
</script>
At line:
if (Modernizr.canvas && Modernizr.localstorage &&
i get:
The entity name must immediately follow the '&' in the entity
reference.
Any idea how to fix that?
All answers posted so far are giving the right solutions, however no one answer was able to properly explain the underlying cause of the concrete problem.
Facelets is a XML based view technology which uses XHTML+XML to generate HTML output. XML has five special characters which has special treatment by the XML parser:
< the start of a tag.
> the end of a tag.
" the start and end of an attribute value.
' the alternative start and end of an attribute value.
& the start of an entity (which ends with ;).
In case of & which is not followed by # (e.g. , , etc), the XML parser is implicitly looking for one of the five predefined entity names lt, gt, amp, quot and apos, or any manually defined entity name. However, in your particular case, you was using & as a JavaScript operator, not as an XML entity. This totally explains the XML parsing error you got:
The entity name must immediately follow the '&' in the entity reference
In essence, you're writing JavaScript code in the wrong place, a XML document instead of a JS file, so you should be escaping all XML special characters accordingly. The & must be escaped as &.
So, in your particular case, the
if (Modernizr.canvas && Modernizr.localstorage &&
must become
if (Modernizr.canvas && Modernizr.localstorage &&
to make it XML-valid.
However, this makes the JavaScript code harder to read and maintain. In case when you want to continue using & instead of & in JavaScript code in a XML document, then you should be placing the JavaScript code in a character data (CDATA) block. Thus, in JSF terms, that would be:
<h:outputScript>
<![CDATA[
// ...
]]>
</h:outputScript>
The XML parser will interpret the block's contents as "plain vanilla" character data and not as XML and hence interpret the XML special characters "as-is".
But, much better is to just put the JS code in its own JS file which you include by <script src>, or in JSF terms, the <h:outputScript>.
<h:outputScript name="onload.js" target="body" />
(note the target="body"; this way JSF will automatically render the <script> at the very end of <body>, regardless of where <h:outputScript> itself is located, hereby achieving the same effect as with window.onload and $(document).ready(); so you don't need to use those anymore in that script)
This way you don't need to worry about XML-special characters in your JS code. As an additional bonus, this gives you the opportunity to let the browser cache the JS file so that total response size is smaller.
See also:
Error Parsing /page.xhtml: Error Traced[line: 42] The entity "nbsp" was referenced, but not declared
Is it possible to use JSF+Facelets with HTML 4/5?
How to reference CSS / JS / image resource in Facelets template?
You need to add a CDATA tag inside of the script tag, unless you want to manually go through and escape all XHTML characters (e.g. & would need to become &). For example:
<script>
//<![CDATA[
var el = document.getElementById("pacman");
if (Modernizr.canvas && Modernizr.localstorage &&
Modernizr.audio && (Modernizr.audio.ogg || Modernizr.audio.mp3)) {
window.setTimeout(function () { PACMAN.init(el, "./"); }, 0);
} else {
el.innerHTML = "Sorry, needs a decent browser<br /><small>" +
"(firefox 3.6+, Chrome 4+, Opera 10+ and Safari 4+)</small>";
}
//]]>
</script>
The parser is expecting some HTML content, so it sees & as the beginning of an entity, like è.
Use this workaround:
<script type="text/javascript">
// <![CDATA[
Javascript code here
// ]]>
</script>
so you specify that the code is not HTML text but just data to be used as is.
Do
<script>//<![CDATA[
/* script */
//]]></script>
If you use XHTML, for some reason, note that XHTML 1.0 C 4 says: “Use external scripts if your script uses < or & or ]]> or --.” That is, don’t embed script code inside a script element but put it into a separate JavaScript file and refer to it with <script src="foo.js"></script>.
Just in case someone from Blogger arrives, I had this problem when using Beautify extension in VSCode. Don´t use it, don´t beautify it.
Related
Is it possible to do basic escaping (of ampersand, in my case) when generating a custom attribute? I have tried many ways (with normal escaping, th:text, th:utext, th:attr for all the dynamic attributes, substituting a custom tag in my Spring code), unfortunately found just some workaround, which is listed below.
Basically, it's about an AngularJS application with a piece of Thymealeaf 3 template:
<script th:inline="javascript">
function customSubmit() {
/*<![CDATA[*/
return /*[(${DIALOG_NAME} + '.$valid && submit()')]*/ null;
/*]]>*/
}
</script>
<form th:name="${DIALOG_NAME}"
th:action= "'/' + ${MODULE} + '.' + ${DIALOG_NAME}"
th:ng-app="${DIALOG_NAME} + 'App'"
th:ng-controller="${DIALOG_NAME} + 'Controller'"
ng-submit="customSubmit()"
...
>
...
</form>
What I am trying to make is one construct like
th:ng-submit="some Thymeleaf expression"
that generates the custom attribute value with the && within:
ng-submit="someDialog.$valid && submit()"
without any function redirection like in the workaround above.
Beside extending Thymeleaf (I am using SpringStandard dialect), is any straightforward way to generate such strings?
Thank you for any suggestion.
Ampersands (&) should be HTML-escaped in tag attributes so you can do it like this:
th:attr="ng-submit='some thymeleaf with && in it'"
EDIT:
If you also want to reference a value of some model attribute in the final form attribute value you have to use the expression preprocessing like this:
<form th:attr="ng-submit='__${DIALOG_NAME}__' + ' some ampersand && in it'">
</form>
Guys I want to pass a parameter that contains html characters in Google Closure Template, but all I get is literal html texts. How to do this?
What I have tried so far is this :
{template .modal autoescape="strict" kind="html"}
{$html_content}
{/template}
I have been reading this but it's not very helpful. Thanks
{template .modal}
{$html_content |noAutoescape}
{/template}
Is going to print your HTML. But consider that using |noAutoescape in your templates is discouraged.
Discouraged: It's easy to accidentally introduce XSS attacks when the assertion
that content is safe is far away from where it is created. Instead,
wrap content as sanitized content where it is created and easy to
demonstrate safety.– Google Closure Templates Functions and Print Directives
Or if you are sure $html_content is "safe" HTML, you can ordain it right where you pass parameters to the template:
goog.require('soydata.VERY_UNSAFE');
goog.require('template.namespace');
var container = document.getElementById('modal');
var html = '<strong>HTML you trust!</strong>';
container.innerHTML = template.namespace.modal({
html_content: soydata.VERY_UNSAFE.ordainSanitizedHtml(html);
});
Then your initial template is going to print HTML as it is:
/**
* #param html_content HTML markup
*/
{template .modal autoescape="strict" kind="html"}
{$html_content}
{/template}
I need to call at server side, an URL and work with the HTML content off the response. For this I'm using the HTTP library from Dart like this :
http.read('myUrl').then((contents) {
//contents to HTMLDocument format //Need to transform the String contents to HTML object
});
And I want to convert the response to a HTMLDocument (or other object I don't know) to be able to retrieve element in it by HTML tag or CSS class, like with JQuery for example.
Does anybody have an idea to perform this ?
You canuse html5lib package from pub. It allows to parse HTML and present it DOM like element tree on server side. The element tree will eventually "be compatible with dart:html, so the same code will work on the client and the server" in the future. See the readme for a getting started example.
"I need to call at server side"
Not sure exactly what you mean.
If you are running in the browser and calling the server you could try using a DocumentFragment. Something like this:
http.read(url).then((html) {
var fragment = new DocumentFragment(html);
var element = fragment.query('.foo');
// code here...
});
Otherwise if you're running server side, as the other answer mentions, html5lib is the way to go. Last time I looked the query() method in html5lib only supported tagname queries not classes, or ids.
I am working on a chat room application and would like to auto format hyperlinks so they can be visited without copy/paste.
I found autolink.js and was able to get it to work using a static HTML template but have not been able to get it working with meteor.
Any suggestions?
Edit -
Meteor Version 0.6.1
Chatroom Application - https://github.com/SmashBrando/chatroom
Autolink.js - https://github.com/bryanwoods/autolink-js
(this is not setup as it did not work)
Put this in the helper you want to display the hyperlink. Assuming you've got the autolink.js all set up in your /client/lib folder just use it with your helper
e.g
client js
Template.hello.greeting = function() {
return "This is a link to Google http://google.com".autoLink()
}
and you need to make sure your HTML uses handlebars that can give html output (thats with 3 curly braces either side instead of 2):
html in your template
{{{greeting}}}
This should output
This is a link to Google http://google.com
Using transform to autolink on cursors
When using a handlebars helper that returns a cursor such as Messages.find() in your code you need to transform your collection. So with your code you need to alter the return value:
Template.messages.messages = function () {
return Messages.find({}, { sort: {time: -1}, transform: function(doc) {
if(doc.message) doc.message = doc.message.autoLink()
return doc;
}
});
};
A transform changes the documents in your collection, so in the above each one's message is autoLinked.
You also need to let let handlebars display this as clickable links by altering your handlebars for the HTML to use 3 curly braces to make sure your 's aren't escaped.:
<template name="message">
<p><strong>{{name}}:</strong> {{{message}}}</p>
</template>
I am using Selenium IDE to verify some elements on a page during a test. I have a script tag that has a dynamic SRC attribute on it. It generates the parameters for the url based on what page design i am on. I am trying to store the value of the parameters for this SRC attribute in Selenium IDE and can't figure out how to do it. Thoughts??
Here is the whole script tag. I just want the Selenium IDE to store the DesignFamily value.
<script src="/JS.aspx?DesignFamily=GSMFamily&Design=GSMExtreme&Version=2011-4-29-17-2-5" type="text/javascript"></script>
This might be the easy workaround. First create user-extension as given here
Then in user-extensions.js add this function.
Selenium.prototype.doStoreQueryStringParameter = function(xpath, varName) {
var currentDocument = selenium.browserbot.getCurrentWindow().document
var result = currentDocument.evaluate(xpath, currentDocument, null, XPathResult.STRING_TYPE, null);
result = result.stringValue
var str = result.split(";")[0].split("=")[1];
storedVars[varName] = str;
};
storeQueryStringParameter function should be in command dropdown after your user-extensions.js has been loaded.
While using this your target should be something like //*parent tags to script*/script[n]/#src //n =1,2,3.. e.g select 2 if 2nd script inside of its of parent tag is to be used
This may not be the most graceful solution, but you can explore the use of getHtmlSource() available in the IDE...
Though, without extending the capability using RC, I'm not sure about parsing the needed information.