Using JSF h:outputLink to produce a page anchor - html

Simple question:
How do you create an HTML anchor like
<a id="organization" />
with JSF, e.g.
<h:outputLink ... />
or another JSF link component? Is it possible at all?

You could use <h:link> for that. Its id attribute becomes the <a id> and <a name>.
<h:link id="organization" value="Organization" fragment="organization" />
It generates the following HTML:
<a id="organization" name="organization" href="/currentcontext/currentpage.xhtml#organization">Organization</a>
But just using plain <a> or even <span> or <div> is perfectly legal in JSF/HTML as jump targets.
<span id="organization">Organization</span>
In order to create a link which jumps to that, use <h:link fragment> without id:
<h:link value="Jump to organization" fragment="organization" />
The generated HTML will look like this:
Jump to organization

Why not use
<h:outputLink value="www.yourweb/somePage#anchor" />
or if its on the same page just
<h:outputLink value="#anchor" />

<h:link value="test" outcome="icerik">
<f:param name="id" value="#{icerik.id}" />
</h:link>
This links to icerik.xhtml?id=2 and seems like test

Related

Add icon (e.g. material design or Prime Icons) to a p:inputText

I want to add an icon for an input text element, in a JavaEE project:
<h:panelGroup styleClass="md-inputfield">
<p:inputText id="name"
value="#{createCustomerView.customer.name}" required="true"
label="Nome" requiredMessage="inserisci il nome">
<f:validateLength minimum="2" />
</p:inputText>
<p:outputLabel for="name" value="Nome" />
<p:message for="name" display="icon" />
</h:panelGroup>
How Can add an icon, like a person icon?
You can make use of Primefaces input group. refer https://www.primefaces.org/showcase/ui/input/inputGroup.xhtml
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="pi pi-user"></i></span>
<p:inputText placeholder="Username" />
</div>
But don't forget you do need to add the PrimeIcons by adding this to your h:head
(like mentioned in https://www.primefaces.org/showcase/ui/misc/primeicons.xhtml)
Please note that the input group is not a component, but a set of CSS rules. Those rules where added in PrimeFaces 7. If you are using an older version of PrimeFaces, it's a good idea to upgrade for many other reasons, but if you really cannot, you can always add the CSS rules to your own project as custom styles.
Alternatively, you should remember that JSF / PrimeFaces will simply render HTML. So you can always resort to a solution using CSS, as can be found at: Put icon inside input element in a form.
See also:
How do I override default PrimeFaces CSS with custom styles?

Can I use CSS to change the colour/gradient etc of a telerik html chart?

I currently have a column chart which uses the default appearance. I understand that I can change the appearance of the chart in the html but I was wondering if I can use a css class to define all of this and if so how?
<div class="row">
<div class="col-md-4">
<telerik:RadHtmlChart runat="server" ID="ColumnChart" Transitions="true">
<ClientEvents OnSeriesClick="OnChartClick" />
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="Count" Name="Product" />
</Series>
<Appearance>
<FillStyle BackgroundColor="Transparent" />
</Appearance>
<XAxis DataLabelsField="Product" />
<YAxis>
<TitleAppearance Position="Center" RotationAngle="0" />
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="false" />
</Legend>
</telerik:RadHtmlChart>
</div>
[...]
I send the data to the chart by setting a DataTable equal to the DataSource property of the chart. Thus, if a new product is added to the DataTable I would like it to use the extra data without me having to edit the html too. I need the chart to use standard colours which are set by regulation can I assign these via a stylesheet?
http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling
Check out this Link, this might can help you.

"br" tags shows in my text in the website?

I have problem with <br /> tags. They show like a code in my site text, and don't make new line as they should!
I see the my texts like this in the site:
fasdkasdlksnad <br /> sadsadsadsd <br /> dsadsadsad<br />
به نام خدا<br /> نماي مدرن <br /> مشاوره، طراحي و اجراي نماي ساختمان :<br />
I have used this code befor inserting to database:
mysqli_real_escape_string($link,nl2br(htmlspecialchars($_POST['text'])));
what should i do to solve this problem?
thankyou
Try following code
mysqli_real_escape_string($link,nl2br(strip_tags($_POST['text'])));

Move elements to top of container using only css

I'm using happy.js for form validation. When an error occurs, a span with the class "unhappyMessage" will be placed directly before the form element that did not pass validation. The html ends up looking something like this:
<form id="myForm">
<label for="text1">Label 1</label><br />
<span id="text1_unhappy" class="unhappyMessage">Error message</span>
<input id="text1" type="text" />
<br />
<label for="text2">Label 2</label><br />
<span id="text2_unhappy" class="unhappyMessage">Error message</span>
<input id="text2" type="text" />
</form>
The <span>s don't show up until an error occurs. I would like to use css to somehow filter the error messages to the top of the parent, as if it were coded like this:
<form id="myForm">
<span id="text1_unhappy" class="unhappyMessage">Error message</span><br />
<span id="text2_unhappy" class="unhappyMessage">Error message</span><br />
<label for="text1">Label 1</label><br />
<input id="text1" type="text" />
<br />
<label for="text2">Label 2</label><br />
<input id="text2" type="text" />
</form>
Note that I would like to make each .unhappyMessage appear on its own line as well. Is there a css-only way to do this?
Note: for those of you who are wondering, I want to use css only because I would have to do some reverse engineering in order to get this working with javascript, since it seems the only event I'm provided through happy.js is not the only time that error messages are created.
Css wont provide a solution for you. Look for another form validator if you have no easy access into the event delegation. Or look into the code to see if you can figure out a work around.
Edit:
looking at the happy.js page it provides a callback function for you to specify if you wish.
unHappy (function): A callback that gets triggered when form
submission is attempted but any fields fail validation.
So pass a function that prepends all the error messages.

Can i use struts tags inside the html tags to initialise their attribute?

I am using the following code but haven't tried it yet:
<input type="checkbox" id="<bean:write name="element" property="idvalue" />" />
Is it valid ?
And how can it be acheived more efiiciently ?
You can use server tags to initialize attributes of HTML tags. The code you posted is valid.
This code:
<input type="checkbox" id="<bean:write name="element" property="idvalue" />" />
evaluates to
<input type="checkbox" id="theID" />
assuming that "theID" is what's inside the "idvalue" property of your bean.
Off course this isn't very easy to read even if you use JSTL as VinAy suggested. You will just ed up with something like this:
<input type="checkbox" id="<c:out value="${element.idvalue}" />" />
Again not easy to read if you have an entire JSP full of these.
The Struts html tags come in handy here and generate the input by using a construct like:
<html:text name="element" property="idvalue" />
which, if you have it inside a <html:form> tag can be further simplified to:
<html:text property="idvalue" />
And if all fails, you can always simplify it as much as you want by writing your own JSP custom tags.