button#someId.input-append(type="button", for="some string") myLabel
I know it creates a button, but I'm not sure what "for" attribute does and what input-append does. I don't see any different by removing them. And I appreciate much if anyone of you can point me to a good site that list all possible attributes in jade.
The above jade code will produce the following HTML:
<button id="someId" class="input-append" type="button" for="some string">myLabel</button
The .input-append is merely a class for the input, and anything within the brackets is just translated to HTML-Attributes. Jade is only markup, and there's no special meaning to these. Jade will translate any key="content"-combo into attributes, as well as any .class.
Related
Switching from handlebars to pug I don't know how to populate a dropdown in pug. In handlebars I could do
<script type='text/javascript'>
$('.ui.dropdown').dropdown('set selected', [{{#each trip.tags}}'{{this}}',{{/each}}]);
</script>
Anyone got a clue what's the best practice in pug?
It looks like you're trying to generate JavaScript values as part of your template rendering. The approach you have taken in markdown could cause an XSS attack if this is not properly escaped (or it might just cause values like " to appear as ").
In pug, we recommend using js-stringify when you need to embed template values in a script. To do this, you need to install js-stringify using npm. You then need to include it in your locals. e.g.
pug.renderFile('my-template.pug', {stringify: require('js-stringify')});
Then you can use it as:
script(type='text/javascript').
$('.ui.dropdown').dropdown('set selected', !{stringify(trip.tags)});
N.B. It is only safe to use the !{...} syntax because js-stringify properly escapes the values before rendering.
I'm trying to create some scripts which require moving through a lot of on-the-fly HTML with random IDs. They require getting the parents of an element - but I'm not sure how to implement this in WebdriverJS.
If I access the element I want via a console, I can do the following to get it;
document.querySelector('span[email="noreply#example.com"]').parentNode.parentNode
Is there a way to do this in WDJS? I've looked and can't see anything obvious - it's specifically the parent stuff I'm having issue with. I saw that a possible solution may be xPath however I'm unsure of syntax having never used it before.
Thanks in advance!
I don't know the syntax of WebDriverJS. But the XPath is as below, you need a way to fit it in somewhere.
This is based on your CSS Selector, so please show HTML if needed.
.//span[#email='noreply#example.com']/../..
For example, if you have HTML like this
<div>
<div>
<span email="noreply#example.com">Contact me</span>
</div>
</div>
You can avoid using .. to go up.
.//div[./div/span[#email='noreply#example.com']]
If you have more levels to look up, another handy method would be using ancestor from XPath Axes.
Also, as #sircapsalot brought up, CSS selectors spec doesn't support parent selecting, so XPath is the only way to go, unless you inject JS.
I would like to show code like primefaces showcase:http://www.primefaces.org/showcase/ui/datatableRowSelectionByColumn.jsf
i use SyntaxHighlighter
,when i include facelets file in pre tag, it work fine.But when i show short code like:<h:outputtext value="test"/>
i code:
<pre class="xml" name="code" ><h:outputtext value="test"/></pre>
it will display html code, the code after jsf compile and render.
i want jsf not compile to html code.
If i use html special character, it seem to be more verbose to code.
How to config or take more code to do that.
(Sorry for my English)
Thank for your attention !
When writing code directly inside the XHTML template, you really need to manually escape XML entities if you intend to present them as-is.
<pre class="xml" name="code"><h:outputtext value="test"/></pre>
Hard to read? Perhaps for a starter, but not for an advanced.
Alternatively, you could store them somewhere in a String which can if necessary be populated from a text (properties) file or even a DB.
String code = "<h:outputText value=\"test\" />";
(please note that you need to escape the doublequotes when you want to hardcode it as a Java String; you don't need to escape anything when it's stored in a text file or a DB)
Facelets will automatically escape it:
<pre class="xml" name="code">#{bean.code}</pre>
You need to exchange the < by < and > by >.
In else case it will be treated as HTML.
I am new to using Jade -- and it's awesome so far.
But one thing that I need to happen is an element with 'itemscope' property:
<header itemscope itemtype="http://schema.org/WPHeader">
My Jade notation is:
header(itemscope, itemtype='http://schema.org/WPHeader')
But result is:
<header itemscope="itemscope" itemtype="http://schema.org/WPHeader">
How can I make sure that I get the right result -- itemscope instead of itemscope="itemscope"?
Sometimes it doesn't work quite right -- like with contentEditable Jade tries to detect html5 doctypes and then does <header itemscope itemtype="http://schema.org/WPHeader"></header> if it finds it. The problem is that if you have templates that you are inserting in the page, it can't tell that it's html5.
What you can do is force html5 compilation by passing in {doctype: '5'} to the options -- did this for require-jade: https://github.com/ibash/require-jade/commit/754cba2dce7574b400f75a05172ec97465a8a5eb
I had the same problem using angular ng-include directive. It gets ng-include="ng-include" and then the include doesn'nt work.
What it works for me is to use an empty string as a value, i.e. ng-include="".
Here is answer from jade developers: you should use
doctype html
in the template.
https://github.com/pugjs/jade/issues/370
I just tried it in a Express.js/Jade project and the result i get is:
<header itemscope itemtype="http://schema.org/WPHeader"></header>
I also tried it in bash and then I get the same result as you.
I'd go with the following suggestion or create an issue on Github.
itemscope="itemscope" will work just as well as just itemscope. It looks like that's the default behavior of Jade. I'd just go with it.
I had the same problem, and the easiest solution in my case was adding doctype 5 at the top of my jade document. That apparently allows Jade to use attributes without a value.
ibash put me on the right track with his answer, so thanks for that
How to display value with HTML tag inside h:inputTextarea?
In DB I have column contain data, it contain plain text and HTML tag, I want display it on h:inputTextarea. How can I do it?
i want display HTML inside h:inputTextArea it mean in DB contain <br/> or <b> and </b> , when it display on h:inputTextArea it must display bold or break line.
That's not possible due to the nature of HTML <textarea> element. Even, if it was possible this puts doors wide open to XSS injection attacks. Also, how would you ever let the enduser edit the markup in the textarea like changing bold to for example italics or to add another markup? That's plain impossible with a <textarea>.
If your sole intent is to have a rich text editor, then you need to homegrow one with help of a <div> and a good shot of JavaScript or, better, use an existing JSF component which achieves this. For example, PrimeFaces' <p:editor>.
Or, if your sole intent is to display it only, then use <h:outputText> with the escape attribute set to false. Once again, keep XSS risks in mind.
Use the f:verbatim tag -> JSF Verbatim Tag