How can I show hide component with JSF

Question

How can I show hide component with JSF  I am currently trying so do the same with the help of javascript but not successfull  I cannot use any third party libraries   Thanks  Abhi

User · Answer

check this below code  this is for dropdown menu  In this if we select others then the text box will show otherwise text box will hide   function show txt arg arg1    if document getElementById arg  value   other     document getElementById arg1  style display  block   document getElementById arg  style display  none     else   document getElementById arg  style display  block   document getElementById arg1  style display  none       The HTML code here     lt select id  arg  onChange  show txt  arg   arg1     gt   lt option gt yes lt  option gt   lt option gt No lt  option gt   lt option gt Other lt  option gt   lt  select gt   lt input type  text  id  arg1  style  display none   gt    or you can check this link click here

User · Answer

You can actually accomplish this without JavaScript  using only JSF s rendered attribute  by enclosing the elements to be shown hidden in a component that can itself be re-rendered  such as a panelGroup  at least in JSF2   For example  the following JSF code shows or hides one or both of two dropdown lists depending on the value of a third   An AJAX event is used to update the display    lt h selectOneMenu value    workflowProcEditBean performedBy   gt       lt f selectItem itemValue  O  itemLabel  Originator    gt       lt f selectItem itemValue  R  itemLabel  Role    gt       lt f selectItem itemValue  E  itemLabel  Employee    gt       lt f ajax event  change  execute   this  render  perfbyselection    gt   lt  h selectOneMenu gt   lt h panelGroup id  perfbyselection  gt       lt h selectOneMenu id  performedbyroleid  value    workflowProcEditBean performedByRoleID                        rendered    workflowProcEditBean performedBy eq  R    gt           lt f selectItem itemLabel  - Choose One -  itemValue      gt           lt f selectItems value    workflowProcEditBean roles     gt       lt  h selectOneMenu gt       lt h selectOneMenu id  performedbyempid  value    workflowProcEditBean performedByEmpID                        rendered    workflowProcEditBean performedBy eq  E    gt           lt f selectItem itemLabel  - Choose One -  itemValue      gt           lt f selectItems value    workflowProcEditBean employees     gt       lt  h selectOneMenu gt   lt  h panelGroup gt

User · Answer

Generally  you need to get a handle to the control via its clientId  This example uses a JSF2 Facelets view with a request-scope binding to get a handle to the other control    lt  xml version  1 0  encoding  UTF-8    gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN     http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml        xmlns h  http   java sun com jsf html  gt     lt h head gt  lt title gt Show Hide lt  title gt  lt  h head gt     lt h body gt       lt h form gt         lt h button value  toggle                 onclick  toggle    requestScope foo clientId     return false     gt         lt h inputText binding    requestScope foo   id  x  style  display  block    gt       lt  h form gt       lt script type  text javascript  gt        function toggle id            var element   document getElementById id           if element style display     block               element style display    none             else             element style display    block                         lt  script gt     lt  h body gt   lt  html gt    Exactly how you do this will depend on the version of JSF you re working on  See this blog post for older JSF versions  JSF  working with component identifiers

User · Answer

You should use  lt h panelGroup     gt  tag with attribute rendered  If you set true to rendered  the content of  lt h panelGroup     gt  won t be shown  Your XHTML file should have something like this    lt h panelGroup rendered    userBean showPassword   gt       lt h outputText id  password  value    userBean password    gt   lt  h panelGroup gt    UserBean java   import javax faces bean ManagedBean  import javax faces bean SessionScoped   ManagedBean  SessionScoped public class UserBean implements Serializable      private boolean showPassword   false      private String password            public boolean isShowPassword            return showPassword            public void setPassword password           this password   password            public String getPassword            return this password

User · Answer

Use the  rendered  attribute available on most if not all tags in the h-namespace    lt h outputText value  Hi George  rendered    Person name     George      gt

User · Answer

One obvious solution would be to use javascript  which is not JSF   To implement this by JSF you should use AJAX  In this example  I use a radio button group to show and hide two set of components  In the back bean  I define a boolean switch   private boolean switchComponents   public boolean isSwitchComponents         return switchComponents     public void setSwitchComponents boolean switchComponents        this switchComponents   switchComponents      When the switch is true  one set of components will be shown and when it is false the other set will be shown     lt h selectOneRadio value    backbean switchValue   gt      lt f selectItem itemLabel  showComponentSetOne  itemValue  true   gt      lt f selectItem itemLabel  showComponentSetTwo  itemValue  false   gt      lt f ajax event  change  execute   this  render  componentsRoot   gt    lt  h selectOneRadio gt     lt H panelGroup id  componentsRoot  gt        lt h panelGroup rendered    backbean switchValue   gt          lt  --switchValue to be shown on switch value    true-- gt        lt  h panelGroup gt       lt h panelGroup rendered     backbean switchValue   gt         lt  --switchValue to be shown on switch value    false-- gt      lt  h panelGroup gt   lt  H panelGroup gt    Note  on the ajax event we render components root  because components which are not rendered in the first place can t be re-rendered on the ajax event   Also  note that if the  componentsRoot  and radio buttons are under different component hierarchy  you should reference it from the root  form root

[java] How can I show/hide component with JSF?

Examples related to java

Examples related to javascript

Examples related to jsf