I'm trying to understand how to add JSF capabilities to an HTML5 document (instead of doing the other way around), and now I see that if I add a jsf:id attribute to an element, the attribute is rendered in the browser as-is (jsf:id) and not as simply id (it doesn't happend with jsf:value in a <input> element, which is rendered as simply value). And now I've seen that some people add both attributes id and jsf:id. Now i am confused.
I understand that I need id if, for instance, I want to access that element via jQuery, but why do I need jsf:id then? couldn't I just add the jsf namespace to other attributein the same element so that the element is processed by the JSF engine, or is jsf:id useful for something else (in the managed bean maybe)?
Thanks
Related
Does anyone know why you can use [id] and you must use [attr.contenteditable] as property binding in Angular?
I have researched for some time and I can't find an answer.
Why some html native attributes can be modified just with its name while others need to be modified through the attr property?
(This answer assumes you're binding to a HTMLElement rather than an in-app model object. Given the [attr.{name}]-syntax is only supported for DOM HTMLElement objects this assumption should stand)
When working with the DOM, the DOM interfaces for certain elements define first-class/native properties (as in JavaScript properties) for certain HTML attributes.
For example, the HTMLElement DOM interface defines a first-class property id, which is why you can directly use it in a binding expression: [id]. Similarly the HTMLAnchorElement exposes the href property.
(I note that contenteditable is a a defined DOM interface property in WHATWG HTML LS, but not the W3C's DOM specs, interesting...)
However, arbitrary (ultra-modern, user-defined, and obsolete) HTML attributes are not exposed through DOM interfaces and so can can only be accessed via the attributes collection in the DOM. Angular requires you to use [attr.{name}] for non-DOM-property attributes so that it knows it has to use the attributes collection instead of assuming it can bind directly to a DOM property.
To answer your question more directly:
when use [name] vs [attr.name]?
Follow this flow-chart:
Is the value I'm after exposed as a DOM interface property?
Yes:
Use [propertyName]
No:
Is the value I'm after a HTML attribute without a corresponding DOM interface property?
Yes: Use [attr.{attributeName}]
No: Quit your job and let someone else deal with the emotional and mental stresses of the fast-moving JavaScript developer ecosystem.
From the docs
Though the target name is usually the name of a property, there is an automatic attribute-to-property mapping in Angular for several common attributes. These include class/className, innerHtml/innerHTML, and tabindex/tabIndex.
So not all attributes are mapped within Angular.
Using the attr. prefix will literally emit the suffix as a string attribute.
Take this example:
<div [attr.data-my-attr]="value"></div>
Will produce the following HTML, assuming that the component property value has a value of 5:
<div data-my-attr="5">
</div>
Why you must use [attr.contenteditable]="editable"?
This isn't true. This is one way of emitting the contenteditable="true" attribute. Another is to use the Angular attribute [contentEditable]="editable", assuming some component property editable exists.
<div [contentEditable]="editable"></div>
DEMO: https://stackblitz.com/edit/angular-ujd5cf
The reason is because most common HTML attributes have special #Input properties in angular itself. E.g. id class etc, but there are way too many attributes to have this for each of them, so those more specific require you to use attr. syntax. The same thing happens with shorthand binding e.g. [style.width.px], you cannot do this with every single property. Event bindings have similar behavior. E.g. you can say (keyup.enter) but not (keyup.j). Angular tries to make your life easier when it can with most common things, but it also provides option to do other things as well.
This also means that you can do e.g. [attr.id]=
I recently downloaded a code and it shows
<button data-effect="st-effect-4">Slide along</button>
From what I figured out "st-effect-4" is a class name but can anyone tell me what this data-effect is for?
HTML5 allows for custom attributes, as long as they begin with "data-". This is a custom attribute with a specific value.
Those are called HTML5 Custom Data attributes.
Custom data attributes are intended to store custom data private to
the page or application, for which there are no more appropriate
attributes or elements. These attributes are not intended for use by
software that is independent of the site that uses the attributes.
Every HTML element may have any number of custom data attributes
specified, with any value.
The reason why you can't find it in Google is because those attribute are custom attributes generated by user for there own use.
It's not for anything.
HTML5 specifies that (just about) any element can have any "data-*" attributes it wants, which can hold any values they want (as long as they can be treated like strings, to store on the element).
So that might be part of a library, or it might just be somebody's CSS for a selector like:
button[data-effect] { background : blue; }
button[data-effect="st-effect-4"]:active { background : purple; }
Or it's being used as a query selector, in JS, for a game's controls...
Who knows?
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
These attributes are not intended for use by software that is independent of the site that uses the attributes.
Every HTML element may have any number of custom data attributes specified, with any value.
For Mary Lou's tutorial - this is to control the animation that brings in the menu.
This can be re-assigned to other trigger elements - however the code that makes it live is the DIV element that comes just before - st-trigger-effects.
If you look through the code and the CSS that controls it, you will be able to re-assign that to where-ever you need to use it.
I am currently using this in a bootstrap boilerplate for a University project.
src: http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
I'm working on a mail server that sends HTML emails down to a mail client. Can the HTML DOM be modified to indicate that either a single or all URLs (<a href=""> elements) use a specific user agent? The integrated browser in our custom client could inspect the HTML to determine what user agent to use and then take that into account when opening the URL.
If it's possible to add a custom (non-standard) attribute to the <a> element or possibly a child element to it, that'd work too, if it's valid to do so. Thanks in advance.
Can the HTML DOM be modified to indicate that either a single or all URLs (<a href=""> elements) use a specific user agent?
Not in any standard way.
If it's possible to add a custom (non-standard) attribute to the element or possibly a child element to it, that'd work too, if it's valid to do so.
"non-standard" is practically invalid by definition.
There is a loophole in data- attributes (since they are defined by the specification as a way to add extensions) but:
"These attributes are not intended for use by software that is independent of the site that uses the attributes"
HTML 5 is a Candidate Recommendation, not a standard.
I am needing to attach a value to an <a> element that will be handled in jQuery. Basically, I am aware of the data- attribute prepended to whatever name I want to give it, but I'm not sure this is the best for (X)HTML, as the software I am coding for is declaring DTD's within the tag, so it would not pass (X)HTML 5.0 validation, as I'm not able to change this to exclude the DTD's.
My question is, can I just use the <a> elements tag attribute to hold the URL links that jQuery will grab using the following code: $(this).attr('tag'); The href attributes value is set to: javascript:void(0); because the actual URL triggers an AJAX event and is not an actual page that one should be browsing to in their browser, as it just performs an action to be taken when clicked on.
I'm not entirely sure what the <a> elements tag attribute is to be used for, but am wondering if this is the best known attribute to use to be able to be valid (X)HTML in both HTML 4 and 5?
My question is, can I just use the <a> elements tag attribute
There is no tag attribute in HTML. So that will have all the problems of data-* but without the future support.
If you want to store arbitrary data in HTML 4/XHTML 1 then the best attribute to use is probably class.
The href attributes value is set to: javascript:void(0); because the actual URL triggers an AJAX event
Don't do that. Use a real (working) URI, and add a JavaScript event handler that prevents the default behaviour if it succeeds. If the URI contains the data you need for your JS to run, then all the better as you can extract it from the href attribute.
I saw an unusual thing in This Website:
AccuWeather.com
Some tags in this page (like lis) have a href with a url in its Class attribute, Like the picture below,
So what I want to know is:
1- Why they used the href and url in class attribute?
2- how can I do this?
ScreenShot http://4ax.ir/images/screenaja.jpg.
It's nothing special. They're just using JSON encoding to put arbitrary data into a DOM element. An alternative to use to the new data- attributes allowed by HTML5.
Why do you want to do this? Browsers will not treat it specially, and in fact JSON-encoded data makes it an invalid attribute value.
1) Why they used the href and url in class attribute?
They did this mainly on li elements. I guess this has been done in order to provide the data to an event handler, in order to navigate to another page on a click or mousedown event.
2) How can I do this?
Basically they're storing a JSON object in the class name. One could extract the data with JSON.parse(...), but you shouldn't. Use the HTML5 data-xxx attributes instead.