1

I have a JSF2 form with some fields defined as read-only, that although the user cannot access have to be submitted. The problem I face is that when I submit the form the readonly fields evaluate to null. I read a the thread Data in <h:inputText readonly="true"> disappears when command button is clicked whith some suggestions, but either I did not understand how they work or there's something wrong with my form.

Here's what I have in my form:

<h:inputTextarea  id="attLFld" value="#{cc.attrs.inc.attL}" rows="8" cols="40" 
         onblur="lookupL(this.value)" >
    <rich:validator/>
</h:inputTextarea>

<h:inputText  id="attLIFld" value="#{cc.attrs.inc.attLI}"   size="14"  readonly="true" />

<a4j:jsFunction name="lookupL" execute="attLFld"
        render="attLFld,attLIFld" 
        action="#{incController.lookupL}">        
</a4j:jsFunction>

And here's my controller method

public void lookupL()
{
   newInc.setAttLI("1234");
}

I tried as suggested in the thread above to have the inputText field with tag readonly set as

<h:inputText  id="attLIFld" value="#{cc.attrs.inc.attLI}"   size="14"  readonly="#{facesContext.renderResponse}" />

But that did not work for me.


Unfortunately that suggestion did not work for me. I think there's something wrong with my form, but I can't see what. Any help would be very welcome.

Here's the xhtml extract (I use Richfaces 4, btw)

<composite:implementation>
<h:panelGrid columns="3"   border="0">
<h:panelGrid columns="1" border="0">   
    <rich:panel id="rpA"> 
        <f:facet name="header">
            <h:outputText value="Field Group A"/>
        </f:facet>  
        <h:panelGrid columns="2" columnClasses="titleCell"   border="0">    
            <h:outputLabel for="fldA1" value="Field A1:" />
            <h:inputTextarea  id="fldA1" value="#{cc.attrs.mybean.fldA1}" rows="8" cols="40" immedite="true" onblur="lookup(this.value)" >
                <rich:validator/>
            </h:inputTextarea>              

            <h:outputLabel for="fldA2" value="Field A2:" />
            <h:inputText  id="fldA2" value="#{cc.attrs.mybean.fldA2}"   size="14"  readonly="true" />                       

            <h:outputLabel for="fldA3" value="Field A3:"/>
            <h:inputText  id="fldA3" value="#{cc.attrs.mybean.fldA3}"  readonly="#{facesContext.renderResponse}" size="14"/>            

        </h:panelGrid>           
    </rich:panel>    
</h:panelGrid>
<h:panelGrid id="pgButtons" columns="1" border="0">
    <a4j:commandButton type="button"  value=">>>>"  action="#{myBeanController.copyFields}"  immediate="true"
    execute="fldA1,fldA2,fldA2H,fldA3,fldA3H" 
    render="fldB1,fldB2,fldB3"/> 

 </h:panelGrid>

<rich:panel id="rpB"> 
        <f:facet name="header">
            <h:outputText value="Field Group B"/>
        </f:facet>  
        <h:panelGrid columns="2" columnClasses="titleCell"   border="0">    
            <h:outputLabel for="fldB1" value="Field B1:" />
            <h:inputTextarea  id="fldB1" value="#{cc.attrs.mybean.fldB1}" rows="8" cols="40" immediateue="true"  >
                <rich:validator/>
            </h:inputTextarea>              

            <h:outputLabel for="fldB2" value="Field B2:" />
            <h:inputText  id="fldB2" value="#{cc.attrs.mybean.fldB2}"   size="14"  readonly="true" />      


            <h:outputLabel for="fldB3" value="Field B3:"/>
            <h:inputText  id="fldB3" value="#{cc.attrs.mybean.fldB3}"  readonly="#{facesContext.renderResponse}" size="14"/>


        </h:panelGrid>           
    </rich:panel>    
</h:panelGrid>      

<div id="hiddenFields">

     <h:inputHidden value="#{cc.attrs.mybean.fldA2H}" id="fldA2H" />
     <h:inputHidden value="#{cc.attrs.mybean.fldA3H}" id="fldA3H"/>  
</div>

<a4j:jsFunction name="lookup" execute="fldA1"
    render="fldA1,fldA2,fldA3,,fldA2H,fldA3H" 
    action="#{myBeanController.lookup}">
  <a4j:param name="loc" assignTo="#{cc.attrs.mybean.fldA1}" />
</a4j:jsFunction>

</composite:implementation>

What I'm trying to do here is to type something in field A1, then populate the A2 and A3 fields and when I click the button to copy all those Ax fields into the Bx fields. I am able to do the first part, but when I click the button both visible(but read-only) and hidden fields evaluate to null in the controller method copyFields

@Model
public class MyBeanController {
  private MyBean newMBean;
   private MyBean mBean;

   @Produces
   @Named
   public MyBean getNewMBean()  {
      return newMBean;
   }

    @Produces
    @Named
    public MyBean getMBean() {
        return mBean;
    }

    public void setNewMBean(MyBean mBean) {
        this.mBean = mBean;
    }

    @PostConstruct
    public void initNewMBean() {
        newMBean = new MyBean();        
    }

    public void lookup()    {
        newMBean.setFldA2("boo");
        newMBean.setFldA2H("boo");
        newMBean.setFldA3("hoo");
        newMBean.setFldA3H("hoo");
    }

    public String copyFields()  {
        newMBean.setFldB1(newMBean.getFldA1());
        newMBean.setFldB2(newMBean.getFldA2H());
        newMBean.setFldB3(newMBean.getFldA3H());
        return null;

    }
Community
  • 1
  • 1
user2144223
  • 11
  • 1
  • 7
  • You could simply put it into a hidden input field in parallel if it is always set to readonly. Why do you need it as a form input if the user cannot modify the value, why not display it as plain text instead ? – Christophe Roussy Mar 07 '13 at 14:13
  • Thank you for the suggestion - I will try it. As for why I would submitt read-only fields - there are many reasons, but the main one is as ever user requirements. – user2144223 Mar 07 '13 at 14:34
  • I did some more digging and it's something to do with the bean scope. I tred with @ViewScoped and RequestScoped, but neither seem to work. The only scope that works is Session, but that is not the scope I need. Any ideas? – user2144223 Mar 14 '13 at 08:39
  • Could anyone help with this - I'm really stuck. I don't understand why ViewScoped is not working - could that be a fault? If not what could the possible reason be? – user2144223 Mar 15 '13 at 09:54

2 Answers2

0

Try to make the component disabled like this:

<h:inputText  id="fldA3" value="#{cc.attrs.mybean.fldA3}"  disabled="#{facesContext.renderResponse}" size="14"/>
Philipp M
  • 1,877
  • 7
  • 27
  • 38
0

I faced this problem several times, JSF doesn't submit disabled or read only input fields which can be a pain if you need to make a quick and seemingly easy change to already developed interface. This read only fields are not validated too. Adding hidden input fields in parallel to existing fields has other problems that make it inconvenient to use, so I decided to leave inputs in normal default condition, but cover them with additional element with higher z-index, so that field is active and processed by JSF normally, but for user it appears as read-only field. Just place a div with "position: absolute" on top of your input and it will behave like read-only or disabled depending on applied CSS.

Example of css for such div:

div.input-blocker {
position: absolute;
left: 0;
top: 0;
z-index: 10004;
width: 100%;
height: 80px;
background-color: rgba(0,0,0,0.05);

}

troy
  • 704
  • 8
  • 16