How to disable / enable JSF input field in JavaScript?
I have an inputField or some other tag that I want to disable. The unitl user clicks on it.
Something like this , but I can't seem to get it to work in JSF.
$("div").click(function (evt) {
$(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});
I add disabled = true "to the input field and the div value set to <h: form> (all parent tags in this case only one) something like j_idt13 and a div from the input field, so the" div "value looks like j_idt13 : inputID
Can someone help me with jQuery solutin?
I know how this can be done in JSF and how.
source to share
You need to switch it through the server side, not the client side. JSF as a state-of-the-art component-based MVC framework protects this way from spoofed / hacked requests where the end user uses client side languages / tools like HTML or JS to manipulate the HTML DOM tree and / or HTTP request parameters like this way that the result is JSF disabled
, readonly
or even rendered
modified.
Imagine what happens if a JSF developer checks the user's role in such a boolean attribute against the administrator role, for example disabled="#{not user.hasRole('ADMIN')}"
, and a hacker manipulates it in such a way that it is no longer disabled for non-admin users. This is why you can only change the specified attributes (and the attribute required
and all converters, validators, event listeners, etc.) on the server side.
You can use it <f:ajax>
in any component ClientBehaviorHolder
to achieve this requirement. You can let JSF generate HTML <div>
via <h:panelGroup layout="block">
, which is also ClientBehaviorHolder
:
<h:form>
<h:panelGroup layout="block">
Click this div to toggle the input.
<f:ajax event="click" listener="#{bean.toggle}" render="input" />
</h:panelGroup>
<h:inputText id="input" ... disabled="#{not bean.enabled}" />
</h:form>
With this @ViewScoped
managed bean ( @RequestScoped
will not work for reasons stated in # 5 of commandButton / commandLink / ajax action / listener, which is not called or the value is not updated ):
@Named
@ViewScoped
public class Bean implements Serializable {
private boolean enabled;
public void toggle() {
enabled = !enabled;
}
public boolean isEnabled() {
return enabled;
}
}
See also:
- What is the need for JSF when UI can be achieved from CSS, HTML, JavaScript, jQuery?
- Why does JSF keep the state of UI components on the server?
Not tied to a specific problem, tackle the following answers if you're really interested in how to get a view of JSF JSF components via JS / jQuery:
source to share