Bedingtes Anzeigen von Elementen

Tawarien

Mitglied
Hallo.
Ich wollte mal fragen, ob es die Möglichkeit gibt, Elemente in HTML nur bedingt anzeigen zu lassen.
Abhänging von einer Variable, die sich am besten mit Javascript umsetzen lässt.
Sprich ich kicke auf einen Button und ein Element taucht auf.

Grüße
 
Hi,

sollte kein Hindernis darstellen, das Element mittels display:none zunächst im Dokument zu verstecken, und über JS mittels display:block, oder display:inline anzeigen zu lassen.

mfg Maik
 
Danke für deine Hilfe, das funktioniert soweit.
Nur in dem Projekt, in dem ich diese Funktionalität bräuchte,
wird JSF verwendet und da habe ich noch Probleme,
auf die Elemente via JS zuzugreifen.

Hätte da jemand vielleicht noch ein Tipp?
 
Kenne mich in bzw. mit Java leider nicht aus.

Vielleicht ist es in diesem Fall auch ratsamer, das Thema in das passende Fachforum zu verschieben.

mfg Maik
 
Die PrimeFaces Komponentenbibliothek beispielsweise hat für einige Komponenten sogenannte widgetVars die speziell zum Verwenden mit
JavaScript Funktionen gedacht sind.

Beispiel:

Code:
<p:dialog id="dialogId" widgetVar="dlg" fixedCenter="true" visible="false" modal="true" constrainToViewport="true"
                  styleClass="yourPanelStyle">
                  ....// CONTENT
</p:dialog>

<h:form>
         <p:commandButton action="#{ backingBean.someAction}" value="Klick me!" onclick="dlg.show();"/>
</form>

Jedes Event (onclick, ondblclick, oncomplete, onclose, usw...) das für JSF- Komponenten existiert ist in der Lage JavaScript basierte Aktionen auszuführen.
Deinen JS-Code kannst du auf XHTML-Seiten einfach wie folgt in den header einbinden:

HTML:
<head>
    <script type="text/javascript">
                // JS- CODE
    </script>    
</head>
 
Zuletzt bearbeitet:
Hm, ich glaub ich poste mal den entsprechenden Code

Code:
<h:form id="pdForm">
[...]
     <t:column>
          <h:inputTextarea [...] />
          <h:outputText id="tolong" style="display:none"/>
     </t:column>
[...]
</h:form>

Code:
function visible() {
	document.all.pdForm:tolong.style.display="inline"
}
function invisible() {
	document.all.pdForm:tolong.style.display="none"
}

Die visible/invisible Funktionen sollen entsprechend eben den Outputtext ein/ausblenden.
Mit "normalem" HTML klappt das wunderbar, allerdings nicht mit JSF,
hier bekomme ich JavaScript-Fehler.
 
Zuletzt bearbeitet:
Warum benutzt du nicht das Validator und ValidatorMessage Attribut der InputTextArea?
 
Saß bis gerade an einem ähnlichen Problem und kann dir jetzt denke ich mal helfen ;)

Also zunächst einmal sollte der ' : ' da weg,
dann solltest du Elemente nach ID abfragen, sprich: getElementById('nameOfElement')
desweiteren les dir mal die doku von display durch ;)

Versuchs lieber mit visibility :)

Sollte das immer noch niox helfen schau dir mal das mächtige jQuery- Framework an :)
 
Hey,
danke für die Hilfe,
mit dem getElementById(); klappts nun nach ein bisschen hin und her wunderbar!

Danke!
 
Zurück