Rendering p:menu after selecting selectoneradion

Question

After selecting a radio option in my .xhtml page, it will invoke my backing bean method to dynamically construct a menu item with values from DB, and render it .xhtml page.

<p:selectOneRadio id="userRadio" value="#{applicationBean.selectedUser}" >
    <f:selectItems value="#{applicationBean.usernames1}" />
    <p:ajax event="change" listener="#{applicationBean.displayCommands}" update="commandmenu" />
</p:selectOneRadio>

<p:menu model="#{applicationBean.model}" id="commandmenu" rendered="#{applicationBean.menudisplay}"/>

backing bean method

public void displayCommands(AjaxBehaviorEvent event)
{
 System.out.println("The selected user is... "+selectedUser);

 Map<String, String> commands =userCommand.get(selectedUser);

 if(commands!=null)
 {
      System.out.println("the number of commands are.."+commands.size());
      for (Map.Entry<String,String> entry : commands.entrySet())
      {
         System.out.println("Key = " + entry.getKey() + ", Value = " + entry.getValue());
      }

 }
 this.menudisplay = true;
 FacesContext.getCurrentInstance().renderResponse();     
}

but the p:menu is not rendered. intially

score 1 · Answer 1 · edited May 23 '17 at 11:50

There are 2 problems with this approach:

The change event is the wrong event to listen on change of radio buttons and checkboxes. You need click instead. Otherwise the 1st click would not trigger the action in a certain browser developed by a team located in Redmond. Even better, just omit the event attribute altogether. It defaults to the right one already.
You cannot let JS/Ajax update content of something which is initially not rendered by JSF and thus completely absent in the HTML DOM tree. You need to wrap the conditionally rendered JSF component inside another JSF component which is always rendered and thus always present in the HTML DOM tree and thus always available to JS/Ajax by usual document.getElementById() ways and so on.

In a nutshell, this is the solution (event attribute is removed; <p:menu> is placed in a panel group):

<p:selectOneRadio id="userRadio" value="#{applicationBean.selectedUser}" >
    <f:selectItems value="#{applicationBean.usernames1}" />
    <p:ajax listener="#{applicationBean.displayCommands}" update="commandmenu" />
</p:selectOneRadio>

<h:panelGroup id="commandmenu">
    <p:menu model="#{applicationBean.model}" rendered="#{applicationBean.menudisplay}"/>
</h:panelGroup>

Rendering p:menu after selecting selectoneradion

backing bean method

1 Answers1

See also: