Willkommen bei Entwickler-Forum.
Seite 1 von 3 1 2 3 LetzteLetzte
Ergebnis 1 bis 10 von 29
  1. #1
    Zaungast
    Registriert seit
    20.12.2016
    Beiträge
    15

    Standard Text-Inhalte von Elementen mit jQuery verändern

    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:

    Code:
    <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:

    Code:
    ...
        <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.

    Code:
    $("#giresun").click(function() {
        alert('hallo hey du da');
        
    });
    Wäre super nett wenn jemand helfen könnte.

    Gruss

  2. #2
    Forenheld
    Registriert seit
    26.02.2003
    Beiträge
    16.200

    Standard

    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
    Geändert von Christian Marquardt (03.01.2017 um 06:29 Uhr)
    Christian

  3. #3
    Zaungast
    Registriert seit
    20.12.2016
    Beiträge
    15

    Standard

    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

  4. #4
    Forenheld
    Registriert seit
    26.02.2003
    Beiträge
    16.200

    Standard

    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
    Christian

  5. #5
    Zaungast
    Registriert seit
    20.12.2016
    Beiträge
    15

    Standard

    Zitat Zitat von Christian Marquardt Beitrag anzeigen
    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?

    Zitat Zitat von Christian Marquardt Beitrag anzeigen

    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.

  6. #6
    Forenheld
    Registriert seit
    26.02.2003
    Beiträge
    16.200

    Standard

    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.
    Christian

  7. #7
    Stammgast
    Registriert seit
    23.04.2011
    Ort
    Zürich
    Beiträge
    435

    Standard

    Zitat Zitat von coldstone Beitrag anzeigen
    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

  8. #8
    Zaungast
    Registriert seit
    20.12.2016
    Beiträge
    15

    Standard

    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?

  9. #9
    Forenheld
    Registriert seit
    26.02.2003
    Beiträge
    16.200

    Standard

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

  10. #10
    Zaungast
    Registriert seit
    20.12.2016
    Beiträge
    15

    Standard

    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:

    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:

    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.
    Geändert von coldstone (08.01.2017 um 23:19 Uhr)

 

 
Seite 1 von 3 1 2 3 LetzteLetzte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •