6

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!

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Tudor Gafiuc
  • 145
  • 1
  • 2
  • 8

4 Answers4

5

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');
Jonathas Pacífico
  • 668
  • 9
  • 18
  • 1
    `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. – Vsevolod Golovanov Jun 13 '19 at 18:23
1

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:

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

Andrew
  • 5,839
  • 1
  • 51
  • 72
  • 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. – Vsevolod Golovanov Jun 13 '19 at 18:31
0

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".

Community
  • 1
  • 1
Maxim Baev
  • 1
  • 1
  • 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. – Tudor Gafiuc Nov 01 '13 at 09:04
  • 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. – Maxim Baev Nov 01 '13 at 09:12
  • 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! – Tudor Gafiuc Nov 01 '13 at 09:23
0

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.

Tudor Gafiuc
  • 145
  • 1
  • 2
  • 8
  • Yes there are times when you need to use an input hidden. Here's an exemple by Optimus Prime the primeface creator: http://forum.primefaces.org/viewtopic.php?f=3&t=3496 – Jonathas Pacífico Jun 30 '14 at 19:04