Ankündigung

Einklappen
Keine Ankündigung bisher.

Bei klick auf button neuen inhalt laden

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bei klick auf button neuen inhalt laden

    Hey,

    ich habe nun mal getestet ob es klappt, mit ajax, wenn man auf ein button klickt das neuer inhalt geladen wird.

    Nun möchte ich, dass man z.b. Pro seite einen button hat. Und dieser Button dann mittels ajax function dann den anderen inhalt ladet.

    Also so:

    Seite 1:

    [klick hier] -> bei klick auf diesem ausführen der ajax function -> laden neuer Inhalt und ersetzen des aktuellen.

    Seite 2:


    [klick hier] -> bei klick auf diesem ausführen der ajax function -> laden neuer Inhalt und ersetzen des aktuellen.


    Beim ersten klicken auf den button funktioniert es, nur wenn ich dann einen neuen button mitausgebe und dann auf diesen klicke funktioniert es nicht mehr.

    Seite/Inhalt 1:
    Code:
    HTML-Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Ajax test</title>
    
        <script>
        function loadcontent(){
            var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                 document.getElementById("log").innerHTML = this.responseText;
        }
      }
          xhttp.open('GET', 'fragen.html', true);
          xhttp.send();
    }
        </script>
    </head>
    <body>
        <div id="log"><p>Huhu du bist das</p>
                <button id="load_frage2" onclick="loadcontent()">test</button>
        </div>
    
    </body>
    </html>
    Seite/Inhalt 2
    HTML-Code:
    <script>
        function load(){
            var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                 document.getElementById("log").innerHTML = this.responseText;
        }
      }
          xhttp.open('GET', 'fragen2.html', true);
          xhttp.send();
    }
        </script>
    
    
    <div id="log">
    <h3>Wer ist blau?</h3>
    
    <label><input type='radio' name="frage"> a) Hans</label><br>
    <label><input type='radio' name="frage"> b) ich </label><br>
    <label><input type='radio' name="frage"> c)du</label><br>
    <label><input type='radio' name="frage"> d) 898</label><br>
    
    <button id="load_frage3" onclick="load()">test2</button>
    </div>
    Seite/Inhalt 3:
    HTML-Code:
    <div id="log">
    <h3>Wer ist blau und hat 2 eier?</h3>
    
    <label><input type='radio' name="frage"> a) Hans</label><br>
    <label><input type='radio' name="frage"> b) kraue </label><br>
    <label><input type='radio' name="frage"> c) lolo</label><br>
    <label><input type='radio' name="frage"> d) <<--->>> HUHU </label><br>
    
    <button id="load_frage4">test</button>
    </div>
    Benutze halt immer den selben code bis auf einer Änderung.

    Ist es möglich ?

    Conner
    Wenn jemand Hilfe bei einem Projekt braucht bin ich bereit kostenfrei mitzuhelfen, denn ich möchte mehr Erfahrung sammeln.

  • #2
    Du lädst alles in das Div "log". Also hast du zwei Elemente mit der ID "log" ineinander (was nicht erlaubt ist).

    Aber der Ansatz ist sowieso komplett falsch.
    Ich würde dir jQuery empfehlen, das vereinfacht dir einiges (sowohl AJAX Requests, als auch das binden von Eventlistener).

    In dem Success Callback des AJAX Requests packst du alles in das div "log" (so wie du das bereits hast).
    In den geladenen Dateien nimmst du aber das "log" div raus und lässt nur den Inhalt drin, der wirklich geladen werden soll.
    Dann hast du nur noch einen script-Teil, wo du die AJAX Requests startest, abspeicherst welche Frage geladen wurde (numerisch inkrementieren) und den Event Listener auf die Klasse des Button bindest (nicht direkt auf den Button binden, sondern auf die Klasse, also mit jQuery .on()).
    "Software is like Sex, it's best if it's free." - Linus Torvalds

    Kommentar


    • #3
      Zitat von JaMa Beitrag anzeigen
      ...und den Event Listener auf die Klasse des Button bindest (nicht direkt auf den Button binden, sondern auf die Klasse, also mit jQuery .on()).
      Ich weiß, dass das der übliche Weg ist, aber was genau ist der Vorteil gegenüber dem "direkten" Weg am Button?


      Kommentar


      • #4
        bei 'button onclick = "funcname(parameter)" muss parameter im globalen scope liegen...bei 3-Zeilern egal, bei größeren Projekten ein absolutes Tabu.

        Kommentar


        • #5
          Ein kleiner Nachtrag, der zeigt, dass onclick generell keine gute Lösung ist

          addEventListener verbiegt nichts...

          HTML-Code:
          <!doctype html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Document</title>
          </head>
          <body>
            <button id="myButton" >MyButton</button>
          
            <script>
          
              var myClick = function (){
                    console.log ( 'click global' );
              };
          
              (function(){
                  var myButton = document.getElementById('myButton');
          
                  myButton.addEventListener('click', function(){
                    myClick();
                  });
          
                  var myClick = function (){
                    console.log ( 'click anonym 1' );
                  };
          
              })();
          
          
              (function(){
                  var myButton = document.getElementById('myButton');
          
                  myButton.addEventListener('click', function(){
                    myClick();
                  });
          
                  var myClick = function (){
                    console.log ( 'click anonym 2' );
                  };
          
              })();
          
          
              (function(){
                  var myButton = document.getElementById('myButton');
          
                  myButton.onclick =  function(){
                    myClick();
                  };
          
                  var myClick = function (){
                    console.log ( 'click geklaut...' );
                  };
          
              })();
          
          
            </script>
          </body>
          </html>

          Kommentar


          • #6
            Zitat von ChromOxid Beitrag anzeigen

            Ich weiß, dass das der übliche Weg ist, aber was genau ist der Vorteil gegenüber dem "direkten" Weg am Button?

            Der Vorteil ist die Trennung vom HTML-Code. Man denke da nur mal an Templates und dergleichen, die oft von Designern erstellt werden die keine Ahnung haben.
            Die Trennung ermöglicht es dem Programmierer der Webseite Funktionalität über das DOM hinzuzufügen ohne das etwas am Template oder Ursprungs-HTML geändert werden muss.

            Weiterhin ist eine Änderung am Code innerhalb von HTML-Elementen fehleranfälliger als wenn es separat betrachtet wird.
            Der Browser kann den Javascript-Code zudem zwischenspeichern was Traffic einspart und der Anwendung mehr Stabilität verleiht.

            Sieh auch http://www.peterkropff.de/site/javas..._nachteile.htm


            Kommentar


            • #7
              Zitat von protestix Beitrag anzeigen

              Der Vorteil ist die Trennung vom HTML-Code. Man denke da nur mal an Templates und dergleichen, die oft von Designern erstellt werden die keine Ahnung haben.
              Die Trennung ermöglicht es dem Programmierer der Webseite Funktionalität über das DOM hinzuzufügen ohne das etwas am Template oder Ursprungs-HTML geändert werden muss.

              Weiterhin ist eine Änderung am Code innerhalb von HTML-Elementen fehleranfälliger als wenn es separat betrachtet wird.
              Der Browser kann den Javascript-Code zudem zwischenspeichern was Traffic einspart und der Anwendung mehr Stabilität verleiht.

              Sieh auch http://www.peterkropff.de/site/javas..._nachteile.htm

              Man kann auch mit Javascript den EventListener direkt auf das Objekt binden. Da ist nicht der Hauptgrund die Trennung von HTML und JS (auch wenn es schon wichtig ist).
              Wichtiger ist was kaminbausatz angesprochen hat, dass die EventHandler dadurch überschrieben werden. Man könnte also nie mehr als einen EventHandler haben. Und natürlich die globalen Parameter.

              Speziell hier wollte ich aber darauf hinaus, dass wenn die Buttons dynamsich geladen werden, ein direkt gebundener EventListener nicht mehr (bzw. nur beim ersten Button) funktioniert. Wird aber über den Selektor gebunden, dann funktionieren die EventListener auch noch bei dynamisch geladenem Inhalt
              "Software is like Sex, it's best if it's free." - Linus Torvalds

              Kommentar


              • #8
                Hey,

                ok alles klar danke für die Ratschläge.

                Ich werde es nun mal versuchen umzusetzen.

                Conner
                Wenn jemand Hilfe bei einem Projekt braucht bin ich bereit kostenfrei mitzuhelfen, denn ich möchte mehr Erfahrung sammeln.

                Kommentar

                Lädt...
                X