webentwicklung-frage-antwort-db.com.de

Wie kann ich eine Komponente mit JSF anzeigen/ausblenden?

Wie kann ich eine Komponente mit JSF anzeigen/verbergen? __ Ich versuche es im Moment, so dass Sie es mit Hilfe von Javascript tun, aber nicht erfolgreich sind.

Danke | Abhi

20
Abhishek Dhote

Im Allgemeinen müssen Sie über die clientId ein Steuerelement an das Steuerelement übergeben. In diesem Beispiel wird eine JSF2-Facelets-Ansicht mit einer Anforderungsbereichsbindung verwendet, um ein Handle für das andere Steuerelement zu erhalten:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://Java.Sun.com/jsf/html">
  <h:head><title>Show/Hide</title></h:head>
  <h:body>
    <h:form>
      <h:button value="toggle"
               onclick="toggle('#{requestScope.foo.clientId}'); return false;" />
      <h:inputText binding="#{requestScope.foo}" id="x" style="display: block" />
    </h:form>
    <script type="text/javascript">
      function toggle(id) {
        var element = document.getElementById(id);
        if(element.style.display == 'block') {
          element.style.display = 'none';
        } else {
          element.style.display = 'block'
        }
      }
    </script>
  </h:body>
</html>

Wie Sie dies genau tun, hängt von der Version von JSF ab, an der Sie gerade arbeiten. In diesem Blogeintrag finden Sie ältere JSF-Versionen: JSF: Arbeiten mit Komponentenkennungen .

13
McDowell

Sie können dies ohne JavaScript tatsächlich erreichen, indem Sie nur das rendered-Attribut von JSF verwenden, indem Sie die anzuzeigenden/verborgenen Elemente in eine Komponente einschließen, die selbst wiedergegeben werden kann, beispielsweise eine PanelGroup, zumindest in JSF2. Mit dem folgenden JSF-Code werden beispielsweise eine oder beide Dropdown-Listen in Abhängigkeit vom Wert einer dritten angezeigt oder ausgeblendet. Ein Ereignis AJAX wird zum Aktualisieren der Anzeige verwendet:

<h:selectOneMenu value="#{workflowProcEditBean.performedBy}">
    <f:selectItem itemValue="O" itemLabel="Originator" />
    <f:selectItem itemValue="R" itemLabel="Role" />
    <f:selectItem itemValue="E" itemLabel="Employee" />
    <f:ajax event="change" execute="@this" render="perfbyselection" />
</h:selectOneMenu>
<h:panelGroup id="perfbyselection">
    <h:selectOneMenu id="performedbyroleid" value="#{workflowProcEditBean.performedByRoleID}"
                     rendered="#{workflowProcEditBean.performedBy eq 'R'}">
        <f:selectItem itemLabel="- Choose One -" itemValue="" />
        <f:selectItems value="#{workflowProcEditBean.roles}" />
    </h:selectOneMenu>
    <h:selectOneMenu id="performedbyempid" value="#{workflowProcEditBean.performedByEmpID}"
                     rendered="#{workflowProcEditBean.performedBy eq 'E'}">
        <f:selectItem itemLabel="- Choose One -" itemValue="" />
        <f:selectItems value="#{workflowProcEditBean.employees}" />
    </h:selectOneMenu>
</h:panelGroup>
58
Kevin Rahe

Sie sollten das <h:panelGroup ...>-Tag mit dem Attribut rendered verwenden. Wenn Sie true auf gerendert setzen, wird der Inhalt von <h:panelGroup ...> nicht angezeigt. Ihre XHTML-Datei sollte ungefähr so ​​aussehen:

<h:panelGroup rendered="#{userBean.showPassword}">
    <h:outputText id="password" value="#{userBean.password}"/>
</h:panelGroup>

UserBean.Java:

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class UserBean implements Serializable{
    //field password and it's getter and setter
    private boolean showPassword = false;
    public boolean isShowPassword(){
        return showPassword;
    }
}
7
Eugenijus S.

Verwenden Sie das Attribut "render" für die meisten, wenn nicht alle Tags im h-Namespace.

<h:outputText value="Hi George" rendered="#{Person.name == 'George'}" />

Eine naheliegende Lösung wäre die Verwendung von Javascript (das nicht JSF ist). Um dies durch JSF zu implementieren, sollten Sie AJAX verwenden. In diesem Beispiel verwende ich eine Optionsfeldgruppe, um zwei Komponentensätze anzuzeigen und auszublenden. In der hinteren Bean definiere ich einen booleschen Schalter.

private boolean switchComponents;

public boolean isSwitchComponents() {
    return switchComponents;
}

public void setSwitchComponents(boolean switchComponents) {
    this.switchComponents = switchComponents;
}

Wenn der Schalter auf true gesetzt ist, wird ein Satz von Komponenten angezeigt, und wenn er falsch ist, wird der andere Satz angezeigt.

 <h:selectOneRadio value="#{backbean.switchValue}">
   <f:selectItem itemLabel="showComponentSetOne" itemValue='true'/>
   <f:selectItem itemLabel="showComponentSetTwo" itemValue='false'/>
   <f:ajax event="change" execute="@this" render="componentsRoot"/>
 </h:selectOneRadio>


<H:panelGroup id="componentsRoot">
     <h:panelGroup rendered="#{backbean.switchValue}">
       <!--switchValue to be shown on switch value == true-->
     </h:panelGroup>

   <h:panelGroup rendered="#{!backbean.switchValue}">
      <!--switchValue to be shown on switch value == false-->
   </h:panelGroup>
</H:panelGroup>

Hinweis: Beim Ajax-Ereignis werden Komponenten als Stamm dargestellt. weil Komponenten, die nicht an erster Stelle gerendert werden, nicht beim ajax-Ereignis erneut gerendert werden können .

Beachten Sie auch, dass sich die Optionsschaltflächen "componentsRoot" und die Optionsschaltflächen unter einer anderen Komponentenhierarchie befinden. Sie sollten von der Wurzel aus (Formularwurzel) darauf verweisen. 

0
Mr.Q

Überprüfen Sie den folgenden Code . Dies ist für das Dropdown-Menü. Wenn wir hier andere auswählen, wird das Textfeld angezeigt, andernfalls wird das Textfeld ausgeblendet.

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 :

<select id="arg" onChange="show_txt('arg','arg1');">
<option>yes</option>
<option>No</option>
<option>Other</option>
</select>
<input type="text" id="arg1" style="display:none;">

oder Sie können diesen Link überprüfen klicken Sie hier

0
Gitesh Dang