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>
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.
Can we access Umbraco Dictionary item value from JavaScript ?
As I am using Umbraco 6.0.5
No, you can't do it out-of-the-box.
I had to do this multiple times, and the best way I came up with, is to print all dictionary items as an object when the page loads (in <head> or something). Of curse only items for the current language.
So in your source you have
<script>
var dic = {"quantity":"Quantity","totalPrice":"Total price","securePayment":"Secure payment"};
</script>
And then get is as
window.dic["quantity"]
As far as I know, you can't do it out of the box - haven't actually tried, though.
I would first create a simple rest service in my website that returns the Umbraco dictionary item using a querystring parameter as the alias value
var alias = HttpContext.Current.Request.QueryString["alias"]
if(alias != null)
{
var dictionaryItem = umbraco.GetDictionaryItem(alias)
...
}
Then call your own webservice through javascript to get the value
What I have done is declare variable in using Javascript
<script type="text/javascript">
var UmbracoDicKeyValue = '<%= kraftvaerk.umbraco.Translations.translate("Umbraco_Dic_Key", lang) %>';
</script>
And for setting value of lang variable from server side.
protected string lang = (!String.IsNullOrEmpty(umbraco.library.Session("lang")) ? umbraco.library.Session("lang") : "en-GB");
umbraco.library.setSession("lang", lang);
Now use variable UmbracoDicKeyValue in javascript code.
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 tried to access Datatable outside gui tag, but failed.
Could some tell me why?
thanks.
the code like this:
<gui:dataTable id="myDataTable" .../>
<script>
var data = GRAILSUI.myDataTable;
alert("hi, " + data);
</script>
it ends with "hi, undefined"
Did you import the resources correctly ?
in the header ?