Wie kann ich Komponenten mit JSF ein-/ausblenden? Ich versuche es gerade so mit Hilfe von Javascript, aber nicht erfolgreich. Ich kann keine Bibliotheken von Drittanbietern verwenden.Wie kann ich Komponenten mit JSF ein-/ausblenden?
Danke | Abhi
Im Allgemeinen müssen Sie einen Griff zur Kontrolle über seine clientId bekommen. In diesem Beispiel wird eine JSF2 Facelets Ansicht mit einem Anfrage-Rahmen mit einem Griff in der anderen Kontrolle zu bekommen Bindung:
<?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>
Genau wie Sie dies auf der Version von JSF abhängen tun Sie gerade arbeiten. In diesem Blogpost finden Sie ältere JSF-Versionen: JSF: working with component identifiers.
nicht genau eine Antwort auf die Frage –
Überprüfen Sie dies unter dem Code. Dies ist für das Dropdown-Menü. Wenn wir andere auswählen, wird das Textfeld angezeigt, ansonsten 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 können Sie diesen Link überprüfen click here
Das ist HTML + JS, was auch in meinem Fall funktioniert, aber ich habe Probleme mit JSF. –
@abhi, wenn Sie auf Bild klicken und dann die Komponente zeigen, dann Bild eine ID geben und OnClick-Ereignis auf IMG-Tag verwenden –
Danke Ricky, aber das ist, was ich tue, was nicht funktioniert für mich. Nichts passiert, wenn ich auf das Bild klicke! –
Verwenden Sie die "gerendert" -Attribut auf den meisten, wenn nicht alle Tags in der h-Namensraum zur Verfügung.
Dies ist bisher der einfachste und beste Weg, dies zu tun. Danke für die Antwort. –
Sie sollten <h:panelGroup ...> Tag mit Attribut rendered verwenden. Wenn Sie true auf gerendert setzen, wird der Inhalt von <h:panelGroup ...> nicht angezeigt. Ihre XHTML-Datei sollte wie folgt 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;
}
}
Ziemlich genau die richtige Idee, aber das gerenderte Attribut sollte für die Komponenten INSIDE panelGroup verwendet werden, anstatt auf der panelGroup selbst, wenn Sie in der Lage sein möchten, die Komponenten dynamisch ein-/auszublenden, wie bei einem AJAX-Event. Wenn Sie rendered für die panelGroup verwenden und die Bedingung zu Beginn falsch ist, erhalten Sie beim ersten Versuch, es zu aktualisieren, einen Fehler, da es auf der Seite nicht vorhanden ist. –
Sie können diese tatsächlich erreichen ohne JavaScript, nur mit rendered Attribut des JSF, durch Einschließen der Elemente in einer Komponente angezeigt/ausgeblendet werden, die selbst wieder gerendert werden kann, z. B. in einer panelGroup, zumindest in JSF2. Der folgende JSF-Code zeigt zum Beispiel eine oder beide Dropdown-Listen an oder blendet sie aus, je nach dem Wert einer dritten. Ein AJAX-Ereignis wird verwendet, um die Anzeige zu aktualisieren:
<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>
Dies sollte die akzeptierte Antwort sein. –
Es sollte beachtet werden, dass dies Ajax verwendet und zusätzliche Serveranforderungen erstellen wird. Obwohl dies manchmal vorzuziehen ist, würde ich mich für eine javascriptbasierte Lösung entscheiden –
Es sollte beachtet werden, dass, wenn Sie auch das Formular absenden wollen, nur die Eingabefelder (oder hier das SelectOneMenus) mit rendered = true übergeben werden. – Fl0R1D3R
Möchten Sie es während der Seitengenerierung anzeigen oder ausblenden oder als Reaktion auf eine Aktion auf der bereits generierten Seite? Die erste kann durch "gerenderte" Attribute von JSF-Tags erreicht werden, letztere durch JavaScript. – amorfis
Die Komponente sollte beim Rendern der Seite nicht sichtbar sein und sollte angezeigt werden, wenn der Benutzer auf ein Bild klickt. Wenn Sie mir den JS-Ansatz sagen können, wird das großartig! –
Wenn Sie JSF 2.0 verwenden können, können Sie mit dem '' -Tag einfach einen Teil der Seite aktualisieren, anstatt eine vollständige Seitenaktualisierung auszulösen. –