Announcement

Collapse
No announcement yet.

Text-Inhalte von Elementen mit jQuery verändern

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • #16
    Hallo,

    Du benötigst jQuery für so eine Kleinigkeit nicht.
    Sind zwar ein paar Zeilen mehr, aber dafür muss die komplette jQuery Library nicht geladen werden ( was bei lokalem XAMPP egal sein mag ).

    Weiterhin solltest Du anstelle von Event-Attributen lieber die Events direkt triggern.
    Ich übernehme um diese Uhrzeit keine Garantie mehr, aber es müsste ungetestet so in etwa funktionieren:
    HTML Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Inhalte per Ajax nachladen</title>
    <script type="text/javascript">
    
    window.onload = function() {
    
        // Click-Event an Button binden
        document.querySelector( 'button[name="btnLoadText"]' ).addEventListener( 'click', _loadText );
    
    };
    
    
    // Funktion, die $.get bzw. $.post ersetzt
    function _loadText() {
    
        var oXmlHttp = new XMLHttpRequest();
        oXmlHttp.addEventListener( 'load', function() {
                document.getElementById( 'target' ).innerHTML( this.responseText );
            });
    
        oXmlHttp.open( 'POST', 'source.html', true );
        oXmlHttp.send();
    
    }
    
    </script>
    </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 name="btnLoadText">Hier klicken</button></p>
    </body>
    </html>
    Als Protokoll würde ich wie verwendet POST nehmen, weil Du damit eine größere Datenmenge transportieren kannst wie mit GET.

    Gruß Arne
    Zuletzt editiert von Arne Drews; 10.01.2017, 02:50.
    PHP rocks!
    Eine Initiative der PHP Community

    Comment


    • #17
      Den Code hast du ja offenbar von der Seite, die Markus verlinkt hat.

      Wenn man eine Lib benutzt, sollte man das auch konsequent machen. D.h. auch die Events dann darüber triggern.
      JQuery beinhaltelt auch weitere nützliche Funktionen, ist oftmals Grundlage für andere Libs. Insofern dürften die 68kb Größe der Datei gut angelegt sein und bei keinem Webserver zu Performanceproblemen bei der Auslieferung führen und bei keinem Client zu Performanceproblemen beim Abruf führen.

      Ja, die Dateien gehören in das htdocs-Verzeichnis, wenn du das nicht geändert hast, in der conf-Datei.

      Kommst du auf die Startseite des Apache, wenn du den Apache startest und im Browser aufrufst
      Christian

      Comment


      • #18
        Also auf unserer Webseite, und das ist nicht die kleinste in Deutschland, gibt es kein jQuery mehr. Viele Methoden sind mittlerweile schon nativ im Browser verfügbar. 68k laden und bei jedem neu laden einer Webseite ausführen muss nicht unbedingt sein. Das kommt aber auch stark aufs Projekt an

        Comment


        • #19
          Ich denke, es kommt auch immer auf das an, was man an Funktionalität braucht. Klar kann jQuery eine Menge Arbeit abnehmen, aber vieles ist einfach heutzutage einfach auch problemlos ohne Bibliotheken umsetzbar.
          Und für den hier geschilderten Fall benötige ich kein jQuery, egal ob großes oder kleines Projekt.
          Für den Request kann man sich einen eigenen kleinen Namespace klöppeln und regelt den Aufruf dann auch per Einzeiler.
          PHP rocks!
          Eine Initiative der PHP Community

          Comment


          • #20
            Originally posted by Christian Marquardt View Post
            Den Code hast du ja offenbar von der Seite, die Markus verlinkt hat.

            Wenn man eine Lib benutzt, sollte man das auch konsequent machen. D.h. auch die Events dann darüber triggern.
            JQuery beinhaltelt auch weitere nützliche Funktionen, ist oftmals Grundlage für andere Libs. Insofern dürften die 68kb Größe der Datei gut angelegt sein und bei keinem Webserver zu Performanceproblemen bei der Auslieferung führen und bei keinem Client zu Performanceproblemen beim Abruf führen.

            Ja, die Dateien gehören in das htdocs-Verzeichnis, wenn du das nicht geändert hast, in der conf-Datei.

            Kommst du auf die Startseite des Apache, wenn du den Apache startest und im Browser aufrufst
            AUf die Startseite von Apache komme ich. Aber wie gesagt, beim klicken auf den BUtton tut sich nichts.


            @Arne Drews

            danke für den code. Werde ich mal ausprobieren

            Comment


            • #21
              danke für den code. Werde ich mal ausprobieren
              Bevor es mit diesem Code das nächste Problem (und die nächste Frage) gibt: es muss
              Code:
              (..).innerHTML = this.responseText ;
              heissen. Ausserdem gibt es Programme wie die Chrome Developer Tools, die bei der Fehlersuche helfen können.
              MfG
              Cheat-Sheets for Developers / Programming Quotes

              Comment


              • #22
                Ja richtig, danke für den Korrekturhinweis. Hatte das Script nicht mehr getestet...
                PHP rocks!
                Eine Initiative der PHP Community

                Comment


                • #23
                  @ Arne Drews

                  leider habe ich es mit deinem code nicht hinbekommen. Habe den Quelltext versucht einzubinden aber es tut sich nicht.


                  ich habe mal aber eine andere frage.

                  ich habe jetzt folgenden Navigationsbereich:

                  HTML:

                  Code:
                  .
                  .
                  .
                   <div class="dropdown-liste">
                                  <a href="#" onclick="daten_amasya()">Amasya</a>
                                  <a href="#" onclick="daten_artvin()">Artvin</a>
                                  <a href="#" onclick="daten_bolu()">Bolu</a>
                                  <a href="#" onclick="daten_corum()">&Ccedilorum</a>
                                  <a href="#" onclick="daten_giresun()">Giresun</a>
                                  <a href="#" onclick="daten_gümüshane()">Gümüshane</a>
                                  <a href="#" onclick="daten_kastamonu()">Kastamonu</a>
                                  <a href="#" onclick="daten_ordu()">Ordu</a>
                                  <a href="#" onclick="daten_rize()">Rize</a>
                                  <a href="#" onclick="daten_samsun()">Samsun</a>
                                  <a href="#" onclick="daten_sinop()">Sinop</a>
                                  <a href="#" onclick="daten_trabzon()">Trabzon</a>
                                  <a href="#" onclick="daten_bayburt()">Bayburt</a>
                                  <a href="#" onclick="daten_bartin()">Bartin</a>
                                  <a href="#" onclick="daten_karabük()">Karabük</a>
                                  <a href="#" onclick="daten_düzce()">Düzce</a>
                                  <a href="#" onclick="daten_zonguldak()">Zonguldak</a>
                           </div>
                  ...
                  habe mir jetzt für jede einzelne Stadt ein eigenes html dokument erstellt mit jeweiligem Text inhalt.
                  durch klicken auf die jeweilige stadt im Navigationsmenü wird auch der Text im *****.html im content Bereich auch angezeigt.

                  Folgende script-code:

                  Code:
                  .
                  .
                  .
                  function daten_bolu() {
                  		$.get('bolu.html', function(data) {
                  			$('#blindtext').html(data);	
                  		});
                  	}
                  ...
                  nun habe ich aber dementsprechend natürlich viele html dokumente.

                  Meine idee ist es einen einzigen html dokument zu erstellen wo die ganzen daten/texte der Städte stehen und ich diese per JS-CODE mit id anspreche. Nur kriege ich es irgendwie nicht hin.
                  Vielleicht geht es auch mit dieser js-code variante garnicht.

                  überlegung wäre jetzt z.B.

                  folgendes html dokument bolu.html

                  Code:
                  <div id="bolu">
                      
                  <h1>GIRESUN</h1>
                  
                  
                  <p>Hier kommen TEXT von GIRESUN</p>
                  
                  </div>
                  Wie kann ich die id="bolu" ansprechen, so dass ich den Inhalt im content Bereich anzeigen lassen kann?

                  Comment


                  • #24
                    Meine idee ist es einen einzigen html dokument zu erstellen wo die ganzen daten/texte der Städte stehen und ich diese per JS-CODE mit id anspreche. Nur kriege ich es irgendwie nicht hin. Vielleicht geht es auch mit dieser js-code variante garnicht.
                    Das wird so nicht gehen.
                    - Die ganze Seite laden, dann parsen. Das macht dann das genze Vorgehen sinnlos, da ggf. nicht nur einmal die Daten geladen werden, sondern x-Mal nach jedem Klick auf einen Link. Dann wäre es sinnvoll alle Daten gleich in die Seite zu integrieren und nur per Javascript die einzelnen Abschnitte sichtbar/unsichtbar zu schalten.

                    - PHP-Script aufrufen, das parst die "einzige" Seite und gibt den gewünschten Teil zurück

                    Die ganze Naviagtion mittels Javascript zu mache mag eine nette Übung sein, ist jedoch mit Nachteilen behaftet, wie bsp. es können keine Links gesetzt werden, Indizierung, User ohne Javascript sehen nichts u.a.

                    ID bolo
                    In dem du dich mit Childselektoren beschäftigst

                    https://api.jquery.com/category/sele...ter-selectors/

                    Das P ist ein Kind von dem DIV. Das 2. Kind
                    Zuletzt editiert von Christian Marquardt; 13.01.2017, 12:08.
                    Christian

                    Comment


                    • #25

                      Die ganze Naviagtion mittels Javascript zu mache mag eine nette Übung sein, ist jedoch mit Nachteilen behaftet, wie bsp. es können keine Links gesetzt werden, Indizierung, User ohne Javascript sehen nichts u.a.


                      Das P ist ein Kind von dem DIV. Das 2. Kind
                      WIe macht man die Navigation denn sonst? Ich dachte das geht nur oder zumindest am besten mit JavaScript?

                      Comment


                      • #26
                        Siehe #4 serverseitig
                        Christian

                        Comment


                        • #27
                          ok mit diesem code

                          Code:
                              <a href="giresun.html" >Giresun</a>
                          verweise ich zwar auf die seite und komme auch dorthin, aber dann müsste ich ja jedes html dokument für sich selbt erstellen. Das ist doch nicht so effktiv oder? Klar habe ich dann den vorteil das die seite auch ohne JavaScript dann funkioniert aber
                          ist es nicht effektiver einen HTML dokument zu erstellen mit den ganzen Daten und diese dann wiederum mit JavaScript auszulesen und in meine index.html seite einzufügen?
                          So hätte ich eine Hauptseite (index.html), einen JavaScript, JQuery und einen Dokument wo meine Text-Daten gespeichert sind.

                          Aktuell habe ich jetzt für jede Stadt eine EIGENE HTML-Datei wie z.B. giresun.html, zonguldak.html, samsun.html etc. wo die daten gespeichert sind.
                          mit diesem JavaScript code kann ich diese in meine index.html laden:

                          Code:
                          function daten_artvin() {
                          		$.get('artvin.html', function(data) {
                          			$('#blindtext').html(data);	
                          		});
                          	}
                          function daten_bolu() {
                          		$.get('bolu.html', function(data) {
                          			$('#blindtext').html(data);	
                          		});
                          	}
                          function daten_corum() {
                          		$.get('corum.html', function(data) {
                          			$('#blindtext').html(data);	
                          		});
                          	}
                          function daten_giresun() {
                          		$.get('giresun.html', function(data) {
                          			$('#blindtext').html(data);	
                          		});
                          	}
                          Aber ich möchte eine html datei mit den Daten haben, wie z.B. daten.html und die jeweiligen Daten mit id´s versehen wie z.B.

                          Code:
                          <div id="giresun">
                          <p> Hier komemn dir Daten</p>
                          </div>
                          
                          <div id="bolu">
                          <p> Hier komemn dir Daten</p>
                          </div>
                          Belomme es aber nicht hin diese per JavaScipt auszulesen.

                          Habe es mal mit folgendem JS-Code versucht:

                          Code:
                          function daten_home() {
                          		$('#blindtext').replaceWith('Hey ich bin da');	
                          		
                          	}
                          so kann ich zwar den Text "Hey ich bin da" einfügen aber, aber wie kriege ich das lesen von einer externen html datei hin?

                          Erfahren Web-Programmierer würden bei meinem CODE mich bestimmt jagen, aber wie gesagt es sind die ersten schritte bei mir.

                          Comment


                          • #28
                            Vom wiederholen gibt es keine andere Anwort.
                            Du kannst nicht von einer externen Datei teilweise lesen.
                            Christian

                            Comment


                            • #29
                              Originally posted by Christian Marquardt View Post
                              Vom wiederholen gibt es keine andere Anwort.
                              Du kannst nicht von einer externen Datei teilweise lesen.
                              OK, danke. Dann geht die Überlegung nicht.

                              Comment

                              Working...
                              X