Text-Inhalte von Elementen mit jQuery verändern

[coldstone]

Hallo and ie Runde,

wie kann ich Daten, die ich in meiner xml datei habe, durch klicken eines Navigationbuttons in meiner HTML seite anzeigen lassen? (kompliziert formuliert)

Ich habe folgendes xml:

<DATEN>
   <REGION>
    Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus 
    viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. 
    Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
    Nam eget dui. 
   </REGION>
<DATEN>

Folgendes HTML:

...
    <li class="dropdown">
        <a href="#" class="dropbtn">Städte</a>
            <div class="dropdown-liste">
                <a href="#giresun">Giresun</a>
                <a href="#">Ordu</a>
            </div>
    </li>
...

 <div id="hauptteil">
            <span id="Überschrift">Hauptteil</span>
         <p id="blindtext"> </p>
  </div>

....

Ich möchte jetzt durch klicken auf #giresun, dass er den Inhalt mit der id=überschrift, mit dem Inhalt in meiner xml datei anzeigt.
Habe es mit jQuery, die ich in meine HTML datei eingebunden habe versucht aber ohne erfolg. Oder geht das mit JQuery garnicht?

Die idee war erstmal einen einfachen Text durch klciken mit folgendem js code anzeigen zu lassen, welches aber leider auch nicht klappt.

$("#giresun").click(function() {
    alert('hallo hey du da');
    
});

Wäre super nett wenn jemand helfen könnte.

Gruss

[Christian Marquardt]

Die XML-Datei muss mittels eines AJAX-Requestes vom Webserver heruntergeladen werden. Sie wird durch ein serverseitiges Programm (PHP,JAVA, PERL) dem Client als Response des AJAX-Requestes zurückgeliefert.
Dann kannst du sie per Javascript auf dem Client auswerten

$("#giresun").click(function()

..ist ein ID-Selektor

http://api.jquery.com/id-selector/

D.h. Auswahlkriterium ist die ID eines HTML-Elementes. Dein Ankter-Element

<a href="#giresun">Giresun</a>

hat kein ID-Attribut diesen Namens. Des Weiteren wäre ein #-Zeichen in einem ID-Attribut nicht erlaubt.
https://wiki.selfhtml.org/wiki/HTML/Universalattribute

Also
<a href="#giresun" id="meineID">Giresun</a>
und
$("#meineID").click(function()...

sollte funktionieren

[coldstone]

Erstmal vielen dank für die Hilfe. Hat wunderbar geklappt.
2 Fragen habe ich aber noch.

1. Wozu dient dann dieses <a href=".......">?

2. Geht das nicht mit einer lokalen xml datei die ich im selben ordner habe, wie meine html + JS + etc. dateien?
Wie wird eigentlich allgemein so etwas gelöst? Ich meine, wie kann ich den Text durch klicken meines Navigationsbuttons einfach ändern ohne das Design meine Webseite komplett zu ändern?
Es werden doch nicht mehrere html seiten für jedes Navigationsbutton erstellt. Geht das nur über AJAX, Webserver etc., wie du es oben erwähnt hast?

Vielen dank nochmals

[Christian Marquardt]

1. Anker-Tag -> das Attribut href sagt aus, welche Seite der Anker bei Aktivierung aufrufen soll

2. Nein, HTML/JS kennen keine Befehle für eine Dateiverarbeitung. Wie sollte die Datei auch auf deinen Rechner kommen? Es wäre fatal, wenn eine Webseite irgendwelche Dateien auf dem Client (deinem Rechner) öffnen könnte.
Üblicherweise werden solche Änderungen nicht auf dem Client gemacht, sondern auf dem Webserver beim erzeugen der Seite mit einer serverseitigen Sprache wie JAVA, PERL, PHP. Dort kannst du dann eine Dateiverarbeitung vornehmen und bsp. eine XML-Datei öffnen

[coldstone]

1. Anker-Tag -> das Attribut href sagt aus, welche Seite der Anker bei Aktivierung aufrufen soll

Verstehe ich irgendiwe nicht. wenn das Attribut href bei bei der Anker aktiverung aussagt, welche Seite aufgerufen werden soll, hat es doch dann keine bedeutung wenn ich mit JS-code auf die ID verweise und diesen TAG sowieso manipuliere. Oder verstehe ich was falsch?

2. Nein, HTML/JS kennen keine Befehle für eine Dateiverarbeitung. Wie sollte die Datei auch auf deinen Rechner kommen? Es wäre fatal, wenn eine Webseite irgendwelche Dateien auf dem Client (deinem Rechner) öffnen könnte.
Üblicherweise werden solche Änderungen nicht auf dem Client gemacht, sondern auf dem Webserver beim erzeugen der Seite mit einer serverseitigen Sprache wie JAVA, PERL, PHP. Dort kannst du dann eine Dateiverarbeitung vornehmen und bsp. eine XML-Datei öffnen

Ok, das es sicherheitstechnisch fatal wäre, ist verständlich. Nur dachte ich, das man zum erlernen der Sprache irgendwie es auch lokal auf dem rechner verarbeiten kann, ohne eine webserver zu benutzen.

[Christian Marquardt]

Die Aussage zu dem Anker verstehe ich nicht.
Das Tag funktioniert auch ohne Javascript und wenn du diesen mit Javascript und einem ID-Selektor manipulieren willst (es gibt auch andere Arten von Selektoren), benötigst du halt eine ID in dem Tag. Wenn du dann mit Javascript das href veränderst -> gut. Das ändert nichts an der Eigenschaft des href-Attributes-> das Verweisziel

Nein, es ist wenig sinnvoll HTML ohne einen lokalen Apache/Tomcat/JBOSS zu lernen.

[Wernfried]

Ok, das es sicherheitstechnisch fatal wäre, ist verständlich. Nur dachte ich, das man zum erlernen der Sprache irgendwie es auch lokal auf dem rechner verarbeiten kann, ohne eine webserver zu benutzen.

Es gibt diverse Seiten (z.B. https://jsfiddle.net oder http://codebeautify.org/htmlviewer) zum Testen. Die eignen sich aber wirklich nur für den ersten Einstieg, du solltest besser Apache o.ä. installieren (das gehört meiner Ansicht auch dazu wenn man HTML/CSS/JavaScript, etc. lernen und verstehen will).

Wenn du nach "Setting up your first Apache server" wirst du Dutzende Beispiele finden.

Gruss

[coldstone]

Vielen dank erstmal. Werde mich mal dann bzgl. Apache o.ä. schlau machen.

Was denn Anker betrifft, habe ich das so verstanden dass, wenn href auf einen link verweist, beim klicken dieser link aufgerufen wird,
es sei denn ich manipuliere es mit JavaScript, denn dieser ist von der Gewichtung stärker. Richtig?

[Christian Marquardt]

Wenn du mit Javascript was anderes reinsetzt wird natürlich das aufgerufen

[coldstone]

Ich habe mir xampp mal installiert und es gestartet.
Nun versuche ich es mal zu testen mit einem Beispielcode welches ich aus dem Netz habe, leider ohne erfolg.

Folgendes Beispiel-code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Inhalte per Ajax nachladen</title>
<style>
div {
	border: 1px solid #ccc;
	padding: 25px;
}
</style>
</head>

<body>
<h1>Inhalte per Ajax (jQuery) nachladen</h1>
<div id="target"> Die Inhalte in diesem Container werden nach dem Klick auf den Button mit den Inhalten aus der Datei <code>source.html</code> überschrieben. </div>
<p>
  <button onclick="kb_source_2_target()">Hier klicken</button>
</p>
<script src="jquery.js" type="text/javascript"></script> 
<script>
	function kb_source_2_target() {
		$.get('source.html', function(data) {
			$('#target').html(data);	
		})
	}
</script>
</body>
</html>

hier der source.html code:

Inhalte geladen! Rock n Roll!

Beim klicken auf den Button wird der Inhalt vom source nicht angezeigt.

Wenn ich es auf meinen Webserver hochlade und die datei aufrufe, funktioniert das ganze aber. Nur Lokal mit xampp nicht.

[Christian Marquardt]

<!doctype html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#mybutton").click(function() {
alert( "hier Source.html mit GET holen" );
});
});
</script>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Inhalte per Ajax nachladen</title>
<style>
div {
border: 1px solid #ccc;
padding: 25px;
}
</style>
</head>
<body>
<h1>Inhalte per Ajax (jQuery) nachladen</h1>
<div id="target"> Die Inhalte in diesem Container werden nach dem Klick auf den Button mit den Inhalten aus der Datei <code>source.html</code> überschrieben. </div>
<p>
<button type="button" id="mybutton">Hier klicken</button>
</p>
</body>
</html>

Dachte du wolltes JQuery benutzen.
Lokal:
- du hast den Webserver gestartet
- die Dateien liegen in dem richtigen Verzeichnis (document-root)
- Groß-/Kleinschreibung beachtet
- Schau man, was in den Logfiles des Webservers steht
- Implementiere die Ajax Fehlerbehandlung http://api.jquery.com/jQuery.get/

XAMPP ist m.E. keine gute Wahl. Lieber Apache, MySQL und PHP eigenständig installieren

[Markus Lahr]

Der Code scheint wohl von https://blog.kulturbanause.de/2012/1...ery-nachladen/ zu stammen ? Daneben gibt es von der MVA ein vollständiges Beispiel zum Thema mit Ajax & JQuery: https://www.youtube.com/playlist?lis...Id1_R-OeEnWKyO (Video Nr. 4, ab Minute 7:30 )

[Christian Marquardt]

Erstaunlich, wie jemand, der als Webdesigner tätig ist, so schlechtes HTML veröffentlicht

[coldstone]

Erstaunlich, wie jemand, der als Webdesigner tätig ist, so schlechtes HTML veröffentlicht

Meinst du den CODE den ich veröffentlicht habe? Ist der wirklich so schlecht als Beispiel? Zumindest funktioniert es aber.

[coldstone]

Dachte du wolltes JQuery benutzen.
Lokal:
- du hast den Webserver gestartet
- die Dateien liegen in dem richtigen Verzeichnis (document-root)
- Groß-/Kleinschreibung beachtet
- Schau man, was in den Logfiles des Webservers steht
- Implementiere die Ajax Fehlerbehandlung http://api.jquery.com/jQuery.get/

XAMPP ist m.E. keine gute Wahl. Lieber Apache, MySQL und PHP eigenständig installieren

Müssen die dateien nicht im xampp ordner unter htdoc ordner liegen?
Ist das nicht jQuery code was ich im JavaScript stehen habe?
Ist das was anderes wenn ich Apache über XAMPP starte oder direkt?