Rudi: Bei OnClick div-element in anderes div-element laden

SELF-Forum

Bei OnClick div-element in anderes div-element laden

Rudi
– Informationen zu den Bewertungsregeln

hallo,
ich habe leider fast keine Ahnung von JScript (nur Grundlagen) und brauche für ein Projekt lediglich nur eine Funktion. Wäre nett, wenn mir jemand helfen kann =)

die div-elemente 'neu1' und 'neu2' sollen je nachdem, welchen Hyperlink man anklickt, in das div-elemet 'inhalt' geladen werde.
Der unten aufgeführte Code funktioniert leider nicht so, wie ich mir es erhofft hatte.

  
<div id="inhalt">  
Hier der alte Text  
</div>  
  
<div id="neu1" style="visibility:hidden">  
neuer text Nr. 1  
</div>  
  
<div id="neu2" style="visibility:hidden">  
neuer text Nr. 2  
</div>  
  
<a href="#" OnClick="document.getElementById('inhalt').innerHTML='document.getElementById('neu1')'">Text wechseln zu 1</a>  
<a href="#" OnClick="document.getElementById('inhalt').innerHTML='document.getElementById('neu2')'">Text wechseln zu 2</a>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bei OnClick div-element in anderes div-element laden

    steckl
    – Informationen zu den Bewertungsregeln

    Hi,

    die div-elemente 'neu1' und 'neu2' sollen je nachdem, welchen Hyperlink man anklickt, in das div-elemet 'inhalt' geladen werde.
    Der unten aufgeführte Code funktioniert leider nicht so, wie ich mir es erhofft hatte.

    Ich würde dafür am besten eine eigene Funktion schreiben, die du dann mit der Id des neuen Divs aufrufst.
    In dieser Funktion erstmal überprüfen, ob das Ziel-Div (inhalt) bereits childNodes hat, das geht mit der Funktion hasChildNodes(). Wenn ja diese löschen, mit removeChild(). Ich wüsste nicht, wie man mehrere Childs gleichzeitig löschen kann, darum am besten eine while-Schleife verwenden, die so lange läuft, wie hasChildNodes() true zurück liefert. In dieser Schleife immer das erste Child löschen (removeChild angewandt auf das firstChild vom Ziel-Div).
    Anschließend das neue Element (neu1 oder neu2) clonen und dann mit appendChild() in das Ziel-Div einhängen.

    <a href="#" OnClick="document.getElementById('inhalt').innerHTML='document.getElementById('neu1')'">Text wechseln zu 1</a>

    Hier hast du einen Syntax-Fehler, den dir auch die Fehlerkonsole eines Browsers angemeckert hätte. (Im Firefox 3 unter Extras -> Fehler-Konsole)

    mfG,
    steckl

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bei OnClick div-element in anderes div-element laden

      rudi
      – Informationen zu den Bewertungsregeln

      Hi,

      Hallo steckl

      Ich würde dafür am besten eine eigene Funktion schreiben, die du dann mit der Id des neuen Divs aufrufst.
      In dieser Funktion erstmal überprüfen, ob das Ziel-Div (inhalt) bereits childNodes hat, das geht mit der Funktion hasChildNodes(). Wenn ja diese löschen, mit removeChild(). Ich wüsste nicht, wie man mehrere Childs gleichzeitig löschen kann, darum am besten eine while-Schleife verwenden, die so lange läuft, wie hasChildNodes() true zurück liefert. In dieser Schleife immer das erste Child löschen (removeChild angewandt auf das firstChild vom Ziel-Div).
      Anschließend das neue Element (neu1 oder neu2) clonen und dann mit appendChild() in das Ziel-Div einhängen.

      Ich habe von diesen Funktionen leider noch nie etwas gehört und demnach auch keine Ahnung davon.
      Könntest du mir ein kleies Beispiel zu diesen Funktionen bezogen auf mein Problem darstellen?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Bei OnClick div-element in anderes div-element laden

        ChrisB
        – Informationen zu den Bewertungsregeln

        Hi,

        Ich habe von diesen Funktionen leider noch nie etwas gehört und demnach auch keine Ahnung davon.

        steckl war so freundlich und aufmerksam, sie dir mit der Dokumentation in SELFHTML zu verlinken. Also machstu Klick drauf, und liest du nach.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Bei OnClick div-element in anderes div-element laden

          Rudi
          – Informationen zu den Bewertungsregeln

          Hi,

          »» Ich habe von diesen Funktionen leider noch nie etwas gehört und demnach auch keine Ahnung davon.

          steckl war so freundlich und aufmerksam, sie dir mit der Dokumentation in SELFHTML zu verlinken. Also machstu Klick drauf, und liest du nach.

          MfG ChrisB

          Für seine Mühe möchte ich ihm auch danken. *Danke*

          Die Links habe ich natürlich auch benutzt und die bei selfHTML gegebenen Kapitel gelesen.
          Doch da ich von JScript nicht gerade die pralle Ahnung habe und das, was dort gecoded wurde, rein garnichts mit dem zu tun hat, was ich brauche, stehe ich immernoch da, wo ich zu Beginn dieses Themas auch stand ^^

          Danke

          mfg Rudi

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Bei OnClick div-element in anderes div-element laden

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Rudi,

    <a href="#" OnClick="document.getElementById('inhalt').innerHTML='document.getElementById('neu1')'">Text wechseln zu 1</a>

    hier schreibst du per onclick den String 'document...." in des Div mit der ID 'Inhalt'. Warum nimmst du nicht den Inhalt (innerHTML) des Divs mit der ID ('neu1') und kopierst ihn in das Div mit der ID 'Inhalt'?

    Noch zwei Anmerkungen:

    Ich würde onclick klein Schreiben.

    Ich würde hinter den Befehl document... = document... noch ein return false setzen, um zu verhindern, dass das Linkziel "#" angesprungen wird. Also onclick='document... = document...; return false'

    Gruß, Jürgen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bei OnClick div-element in anderes div-element laden

      Rudi
      – Informationen zu den Bewertungsregeln

      Ich habe etwas gefunden, was nicht ganz meiner Vorstellung entsprach, aber das ist schonmal sehr nützlich:

      <script>  
var d = document;  
var PAYMENT_IDENT = 'displayZahlungsart';  
function switchPayment( id ){  
	var paymentContainer = d.getElementsByTagName( 'div' );  
	  
	if( paymentContainer ){  
		for( var i = 0; i < paymentContainer.length; i++ ){  
			if( paymentContainer[i].lang == PAYMENT_IDENT ){  
				if( paymentContainer[i].id == "zahlart"+id ){  
					paymentContainer[i].style.display = 'block';  
				}else{  
					paymentContainer[i].style.display = 'none';  
				}  
			}  
		}  
	}  
}  
  
  
</script>

      <div style="margin-bottom: -10px;"><h5 style="padding-left: 0px;"><!--Zahlungsmethode--></h5></div>  
<div style="float: left; width: 158px; color: #e0e0e0; padding-bottom: 10px;">  
	<input class="radio_margin-ie" onClick="switchPayment(1);" type="radio" name="Zahlungsart" value="&Uuml;berweisung" />&nbsp;&Uuml;berweisung<br />  
	<input class="radio_margin-ie" onClick="switchPayment(2);" type="radio" name="Zahlungsart" value="Bankeinzug" />&nbsp;Bankeinzug<br />  
	<input class="radio_margin-ie" onClick="switchPayment(3);" type="radio" name="Zahlungsart" value="PayPal" />&nbsp;PayPal<br />  
</div>  
<br style="clear: left;" />  
<div style="display:none;" id="zahlart1" lang="displayZahlungsart">  
	ERSTE BOX !!!!  
</div>  
<div style="display:none;" id="zahlart2" lang="displayZahlungsart">  
	EINE BOX  
</div>  
<div style="display:none;" id="zahlart3" lang="displayZahlungsart">  
	Die MEGA-BOX  
</div>

      Ich bräuchte eine Funktion, die einen Inhalt in eine bereits vorhandene Box (größe fixiert) anzeigt.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Bei OnClick div-element in anderes div-element laden

        JürgenB Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo Rudi,

        Ich habe etwas gefunden, was nicht ganz meiner Vorstellung entsprach, aber das ist schonmal sehr nützlich:

        den Code verstehe ich nicht, was hat der mit dem im Ausgangsbeitrag zu tun?

        Ich bräuchte eine Funktion, die einen Inhalt in eine bereits vorhandene Box (größe fixiert) anzeigt.

        die hattest du doch schon fast. Einfach den Inhalt des einen Divs in das andere kopieren:

        document.getElementById("Ziel").innerHTML = document.getElementById("Quelle").innerHTML;

        Gruß, Jürgen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Bei OnClick div-element in anderes div-element laden

          rudi
          – Informationen zu den Bewertungsregeln

          den Code verstehe ich nicht, was hat der mit dem im Ausgangsbeitrag zu tun?

          eigentlich genau das, was ich wollte Oo ... Wenn das nicht so rüberkam: sorry.

          »» Ich bräuchte eine Funktion, die einen Inhalt in eine bereits vorhandene Box (größe fixiert) anzeigt.

          die hattest du doch schon fast. Einfach den Inhalt des einen Divs in das andere kopieren:

          document.getElementById("Ziel").innerHTML = document.getElementById("Quelle").innerHTML;

          Bei ("Quelle") müsste dann aber ein weiteres div-Element angegeben werden, was wiederum nicht bei mir funktioniert hat (siehe Start-Beitrag).

          mfg rudi

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Bei OnClick div-element in anderes div-element laden

            JürgenB Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo rudi,

            Bei ("Quelle") müsste dann aber ein weiteres div-Element angegeben werden, was wiederum nicht bei mir funktioniert hat (siehe Start-Beitrag).

            der Code in deinem Startbeitrag hat ein paar ' zu viel und ein innerHTML zu wenig. Vergleich ihn mal mit dem, was ich in meinen Antworten geschrieben habe.

            Gruß, Jürgen

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Bei OnClick div-element in anderes div-element laden

              rudi
              – Informationen zu den Bewertungsregeln

              der Code in deinem Startbeitrag hat ein paar ' zu viel und ein innerHTML zu wenig. Vergleich ihn mal mit dem, was ich in meinen Antworten geschrieben habe.

              Gruß, Jürgen

              Es Funktioniert ^_^
              Vielen Dank, Jürgen!

              Nun habe ich zwei Varianten.

              Ich denke mal, dass die erste aufgrund des geringeren Codes die bessere ist.

              Nochmals vielen Dank. =)

              --------------VARIANTE 1--------------

              <div id="inhalt">  
Hier der alte Text  
</div>  
  
<div id="neu1" style="visibility:hidden">  
neuer text Nr. 1  
</div>  
  
<div id="neu2" style="visibility:hidden">  
neuer text Nr. 2  
</div>  
  
<a href="#" OnClick="document.getElementById('inhalt').innerHTML = document.getElementById('neu1').innerHTML;">Text wechseln zu 1</a>  
<a href="#" OnClick="document.getElementById('inhalt').innerHTML = document.getElementById('neu2').innerHTML;">Text wechseln zu 2</a>

              --------------VARIANTE 2--------------

              <script language="javascript">  
	var d = document;  
	var INFO_IDENT = 'displayInformation';  
	function switchCharInfo( id ){  
		var CharInfoContainer = d.getElementsByTagName( 'div' );  
		  
		if( CharInfoContainer ){  
			for( var i = 0; i < CharInfoContainer.length; i++ ){  
				if( CharInfoContainer[i].lang == INFO_IDENT ){  
					if( CharInfoContainer[i].id == "info_page"+id ){  
						CharInfoContainer[i].style.display = 'block';  
					}else{  
						CharInfoContainer[i].style.display = 'none';  
					}  
				}  
			}  
		}  
	}  
</script>

              <div style="margin-bottom: -10px;"><h5 style="padding-left: 0px;"><!--Zahlungsmethode--></h5></div>  
<div style="float: left; width: 158px; color: #e0e0e0; padding-bottom: 10px;margin-top:5030px;">  
	<a href="JavaScript:switchCharInfo(1)" onClick="switchCharInfo(1);"/>erste box</a><br />  
    <a href="JavaScript:switchCharInfo(2)" onClick="switchCharInfo(2);"/>zweite box</a><br />  
    <a href="JavaScript:switchCharInfo(3)" onClick="switchCharInfo(3);"/>dritte box</a><br />  
</div>  
<br style="clear: left;" />  
<div style="border:solid red 1px;width:200px;" lang="displayInformation">  
	leere BOX !  
</div>  
<div style="display:none;border:solid red 1px;width:200px;" id="info_page1" lang="displayInformation">  
	ERSTE BOX !  
</div>  
<div style="display:none;border:solid red 1px;width:200px;" id="info_page2" lang="displayInformation">  
	ZWEITE BOX !  
</div>  
<div style="display:none;border:solid red 1px;width:200px;" id="info_page3" lang="displayInformation">  
	DRITTE BOX !  
</div>
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln