Set class or ID on <h:inputHidden> in JSF

Question

I'm trying to set a class or id parameter on a <h:inputHidden> in JSF. The code looks like this:

<h:inputHidden value="#{getData.name}" class="targ" />

But in the browser, the class isn't set:

<input type="hidden" name="j_idt6" value="j_idt6">

I need to set a class to this parameter, because I have a JavaScript autocomplete function for a <h:inputText> that sets a value in the hidden input, which needs to be passed in the next page.

Any ideas? Thanks!

Mele

Answer 1

I know it's a little bit late, but it can help someone in the future. As inputHidden shows nothing in the browser there's no sense to allow it to have a class. You can use the Id but as the Id could change as you change the component parents using it would bring some headache.

I'd suggest as a workaround, you can give it a parent so you can manipulate it by javascript.

Exemple:

JSF

<h:panelGroup styleClass="someCssClass">
   <h:inputHidden id="someId" value="someValue" />
</h:panelGroup>

Javascript (using jQuery, you could use pure javascript also)

$('.someCssClass input[type=hidden]').val('yourNewValue');

Aggiornamento

As inputHidden shows nothing in the browser there's no sense to allow it to have a class - that's not right. The HTML class is just a semantic attribute, the fact that it's commonly used with CSS doesn't mean that it's dedicated to styling. – Laurenelaurens

Answer 2

None of these answers here satisfied my needs (need the PrimeFaces component, need class not ID, wrapping is too much work), so here's what I came up with:

• Use pass-through attributes: https://www.primefaces.org/jsf-2-2-pass-through-attributes
• Use pass:hidden-class="blah" (in my case, it's xmlns:pass up top)
• Use [attribute=value] selector:
  • https://www.w3schools.com/cssref/sel_attribute_value.asp
  • document.querySelector multiple data-attributes in one element

That basically boils down to using something like this (because h:inputHidden becomes a regular input): document.querySelector("input[hidden-class=" + blah + "]")

Yearling

Passthrough attributes are the answer. But you don't have to make up a new attribute name, you can just do pass:class. That's perferctly valid. – Laurenelaurens

Answer 3

Please, see similar question - How can I know the id of a JSF component so I can use in Javascript You can sed "id" property, but in final html code it can be not the same, but composite: for example, if your input with id="myhidden" is inside form with id="myform", final input will have id="myform:myhidden".

Dyscrasia

Thanks, but that article refers mostly to inputText, which I had no problem with setting a class. inputHidden has a different behavior, as it doesn't get any class or id in the browser if you set it in the code. – Mele

You can't set 'styleClass' property for h:inputHidden (as it is not visible and not supposed to have any styling), but if you set 'id' property it is seen in the final rendered HTML code, but has value composed using component hierarchy, as I wrote previously. As I understood from your question, you need a way to somehow select this input in JS and set value, 'id' is enough for this. – Dyscrasia

I tried with styleClass, but Netbeans returned this error: "The attribute styleClass is not defined in the component inputHidden". I have also tried with "id" and it didn't show up, just like I mentioned in my question. Thanks for your help anyway! – Mele

Answer 4

In the end, I used a standard HTML <input type="hidden"> tag, as I had no advantages for using the JSF one. If you're trying to set a value in a hidden input with JavaScript, I recommend using this workaround.

Mele

Yes there are times when you need to use an input hidden. Here's an exemple by Optimus Prime the primeface creator: forum.primefaces.org/viewtopic.php?f=3&t=3496 – Preview