JavaScript Durch Radiobutton die Anzeige eines Div-Container ändern

[Phantro]

Hallo zusammen.

Ich habe mal wieder ein Problem :-( Ich arbeite mit Confluence in unserer Firma, welches als Wiki eingesetzt werden soll.

Nun möchte ich auf unserer Abteilungsseite 2 Radiobuttons einfügen, welche mir je nach Auswahl die Div-Container Wrap1 bzw. Wrap2 anzeigt. Diese habe ich aktuell via CSS auf "display:none" gesetzt.

Hier meine Buttons:

<input type="radio" name="anzeige" value="wrap1" checked="checked"><h6>Prozesse nach Gruppen</h6><br>
<input type="radio" name="anzeige" value="wrap2"><h6>Prozesse nach Alphabet</h6><br>

Nun wollte ich per Javascript den Wert "value" auslesen und den Div-Container mit gleichlautender ID vom "display:none" befreien, sodass dann entsprechender Inhalt angezeigt wird. Allerdings habe ich hier keine Ahnung, wie ich das halbwegs tauglich bewerkstelligen kann. Es ist mir leider auch nicht möglich, vorgefertigte .js files oder andere Dateien einzulesen. Sprich, der Code muss direkt auf der Seite eingetragen werden und sollte demnach nicht x-tausend Zeilen am Ende haben.

Hat jemand eine Idee, wie ich mein Vorhaben umsetzen kann? Kann ich das auch auf eine andere Art und Weise mit diesen Radio-Buttons ändern?
Bin leider in Javascript noch nicht so ganz fit :-(

Schonmal Danke im voraus.

 

[sdf0815]

Hi,

in Javascript bin ich zwar auch nicht super Fit, aber hast du dir mal angeschaut wie der Layout-Umschalter bei Computerbase gelöst ist?

Grüße

 

[SymA]

Arbeite mit document.getElementsByName. Du schaust einfach beim Klicken eines Buttons, oder Änderung eines Wertes ob die Elemente true oder false sind und führst dann weitere Aktionen durch. Das ist jetzt spontan mein Ansatz. Im Javascript änderst du dann das CSS Attribut des Divs von display:none auf inline oder wie du es haben willst.

 

[Phantro]

@sdf0815
Layout Umschalter? Nun verwirrst mich Hab noch nie irgendwas im Bezug auf Layout bei Computerbase gemacht.

@SymA
Wie greife ich denn mit Javascript die Radiobuttons ab? Ich habe anhand eines anderen Scripts folgenden Lösungsweg gefunden, der aber leider nicht funktioniert. Wo aber der Fehler ist? Keine Ahnung. Wie gesagt, komm mit Javascript noch nicht zurecht. Versuche anhand w3schools und selfhtml zwar mich reinzulesen, aber das "Projekt" überfordert mich als Laie gerade etwas.

<script type="text/javascript">
objRadio.checked {
if(auswahl=="wrap1"){getElementByID(wrap1).style.display = 'block';}
if(auswahl=="wrap2"){getElementByID(wrap2).style.display = 'block';}
}
</script>

 

[sdf0815]

Du kannst den Quellttext von cb anschauen. Bei Chrome geht es mit F12 oder im Kontextmenü über dem entsprechenden Element "Element untersuchen".

Ob Du daraus schlau wirst, weiß ich nicht. Aber es dürfte im großen und ganzen das Ergebnis liefern, was du brauchst.
Ich meinte auch nicht kopieren sondern nur mal als Anregung nehmen vielleicht ^^.



Grüße

 

[Phantro]

Cool. Ist mir noch nie aufgefallen das Teil Allerdings ist über den Quelltext da nicht viel rauszufinden oder ich bin einfach nur Blind. Finde kein Javascript außer jene, die eingelesen werden. Und diese kann ich mir ja nicht anschauen =(

 

[SymA]

http://www.dcljs.de/faq/antwort.php?Antwort=forms_radioselect
Ich denke damit dürfest du das gewünschte Erreichen können

 

[Spike S.]

Ich bin mal nett und geb eine ungetestete Lösung:

<script type="text/javascript">
document.getElementById('auswahl').addEventListener('click', function() {
	var ausw = this.value;
	if(ausw == 'wrap1') {
		document.getElementById('wrap1').style.display = 'block';
		document.getElementById('wrap2').style.display = 'none';
	} else {
		document.getElementById('wrap1').style.display = 'none';
		document.getElementById('wrap2').style.display = 'block';
	}
});
</script>

Bei mehr als 2 Auswahlmöglichkeiten, das if in ein Switch ändern.

 

[bieneneber]

oder so:

<script type="text/javascript">
		<!--
		function check(auswahl) {

			if(auswahl=="wrap1")
			{
				document.getElementById("wrap1").style.display = "inline";
				document.getElementById("wrap2").style.display = "none";
			}
			if(auswahl=="wrap2")
			{
				document.getElementById("wrap1").style.display = "none";
				document.getElementById("wrap2").style.display = "inline";
			}
		}
		//-->
		</script> 

...
<input type="radio" name="anzeige" value="wrap1" checked="checked" onchange="check(this.value);"><h6>Prozesse nach Gruppen</h6><br />
<input type="radio" name="anzeige" value="wrap2"  onchange="check(this.value);"><h6>Prozesse nach Alphabet</h6><br />

...
<div style="display:inline;" id="wrap1">...wrap1...</div>
<div style="display:none;" id="wrap2">...wrap2...</div>

 

[sdf0815]

Doch kannst Du.
Ich habe es nur überflogen. Es geht scheinbar mit der jQuery Funktion toogle http://api.jquery.com/toggle/ .
Wenn du mit jQuery arbeiten kannst (du sagtest externe Scripts können nicht eingebunden werden):
Hier die .js Datei von cb https://www.computerbase.de/clientscripts/cb-desktop.1365595478.js Suche darin nach dem Teil des Klassennamens "index-layout".
Wahrscheinlich krieg ich gleich ne gelbe Karte =)

Grüße

 

[Phantro]

So, habe nun beide Varianten (Spike S. und bieneneber) getestet . Erstmal danke für den Code :-)

Bei Dir Spike, geschieht leider gar nichts. Ich denke aber mal, das es mit dem 'auswahl' nicht hinkommt, da diese ID nirgends definiert ist bei mir. Bekomme es auch leider nicht auf die Reihe, den Code entsprechend anzupassen. Ich habe versucht, die Buttons in einen <form> Tag zu verschachteln und via ID etc. alles abzugreifen. Auch wenn ich die Buttons selbst mit der ID belege, geschieht leider nichts.

Bei bieneneber hab ich ein anderes Problem -> Beim laden der Seite ist der content, der bei checked-Button (wrap1) aufgerufen wird, nicht sichtbar. Klicke ich Button2 (wrap2) an, geschieht ebenfalls nichts. Klicke ich dann wieder den 1. Button an, wird erst wrap2 geladen. Ich versuch mich mal aber an der Vorlage Richtung Ziel zu hangeln :-)

Edit: Ok, nun klappts. Habe einfach den wrap2 standard auf display:none, wrap1 auf sichtbar. Sobald ich nun die Buttons umsetze, klappt auch die Änderung des Inhalts entsprechend. Habe hierzu das onchange durch onclick ersetzt =)

 

[Spike S.]

Ich hatte mich im Namen der Radiobuttons geirrt. Außerdem hatte ich vergessen, dass addEventListener in dem Fall auf alle Radiobuttons einzeln angewendet werden muss. Hier noch mal vollständig und getestet:

<html><head><title>Test</title>
<script type="text/javascript">
function swDiv() {
	var ausw = this.value;
	if(ausw == 'wrap1') {
		document.getElementById('wrap1').style.display = 'block';
		document.getElementById('wrap2').style.display = 'none';
	} else {
		document.getElementById('wrap1').style.display = 'none';
		document.getElementById('wrap2').style.display = 'block';
	}
}
function init() {
	for(var i = 0; i < document.getElementsByName('anzeige').length; i++) {
		document.getElementsByName('anzeige')[i].addEventListener('click', swDiv, false);
	}
}
</script>
</head><body onload="init();">
<div>
	<input type="radio" name="anzeige" value="wrap1"> 1 <br>
	<input type="radio" name="anzeige" value="wrap2"> 2
</div>
<div id="wrap1" style="border:1px solid red;">Wrap 1</div>
<div id="wrap2" style="border:1px solid green;">Wrap 2</div>
</body></html>

 

[Daaron]

Warum sollte man sich die Mühe machen, den Mist selbst zu schreiben? Für alle großen JS-Frameworks gibt es da Komplettlösungen, bei denen dann nicht wegen einem zusätzlichen radio/div - Paar der Code geändert werden muss. Möcht wetten, Confluence bringt eh jQuery mit.