Seite 2 von 2 ErsteErste 12
Ergebnis 16 bis 24 von 24
Like Tree1Likes

Thema: click(function() und replaceWith mehrmals ausführen

  1. #16
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.500

    AW: click(function() und replaceWith mehrmals ausführen

    Zeig' doch mal deinen kompletten Code mit den Farben, den du probiert hast.

    Steht etwas in der Fehlerkonsole?

  2. #17
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    AW: click(function() und replaceWith mehrmals ausführen

    Ich habe soeben die sehr einfache Lösung gefunden.

    Statt

    HTML-Code:
    $( "button" ).focus(function() {
      $( this ).css( "background-color", "red" );
    });
    verwende ich jetzt:

    HTML-Code:
    document.getElementsByName(riAntwort)[0].style.backgroundColor = "red";
    - - - Aktualisiert - - -

    Ich bin jetzt allerdings auf ein neues Problem gestoßen, das mir vorher nicht aufgefallen war.

    Wenn ich schreibe:

    HTML-Code:
    setTimeout(function(){ $("form").replaceWith('<form> usw. </form>'); }, 3000);
    wird zwar das Formular mit der neuen Frage und den neuen Antworten nach 3 Sekunden richtig angezeigt, klicke ich dann auf eine Lösung, wird mir der Fehler Notice: Undefined index: submit in C:\xampp\htdocs\quiz\validate_test.php on line 3 angezeigt und ich werde zu eben dieser validate_test.php geleitet Lasse ich setTimeout weg, funktioniert wieder alles.
    Geändert von mikdoe (12-04-2017 um 14:32 Uhr) Grund: code tags

  3. #18
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.500

    AW: click(function() und replaceWith mehrmals ausführen

    Hast du einen Testlink, wo wir uns das live ansehen können?

  4. #19
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    AW: click(function() und replaceWith mehrmals ausführen

    Leider nicht, nur lokal per Xampp. Ihr könnt es allerdings mit folgendem Code selbst probieren.

    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
      <head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
    <div id="grundgeruest">
    
    
        <form action="validate_test.php" method="post">
              <h1 id="frage">Frage
              <hr />
              <button type="submit" name="submit1"><h2>Antwort 1</button><br>
              <button type="submit" name="submit2"><h2>Antwort 2</h2></button><br>
              <button type="submit" name="submit3"><h2>Antwort 3</h2></button><br>
              <button type="submit" name="submit4"><h2>Antwort 4</h2></button><br>
              <input type="hidden" name="richtig" value="submit2">
    
        </form>
    </div>
    <script>
    // 2. Aufruf
    $("form").submit(function(event) {
    
        // Das eigentliche Absenden verhindern
        event.preventDefault();
    
        // Das sendende Formular und die Metadaten bestimmen
        var form = $(this); // Dieser Zeiger $(this) oder $("form"), falls die ID form im HTML exisitiert, klappt übrigens auch ohne jQuery ;)
        var action = form.attr("action"), // attr() kann enweder den aktuellen Inhalt des gennanten Attributs auslesen, oder setzt ein neuen Wert, falls ein zweiter Parameter gegeben ist
            method = form.attr("method"),
            data   = {submit:event.originalEvent.explicitOriginalTarget.attributes.name.value};
    
        // Der eigentliche AJAX Aufruf
        $.ajax({
            url : action,
            type : method,
            data : data
        }).done(function (data) {
    
            $("form").replaceWith('<form action="validate_test.php" method="post"><h1 id="frage">Frage</h1><hr /><button type="submit" name="a">Antwort a</button><br><button type="submit" name="b">Antwort b</button><br><button type="submit" name="c">Antwort c</button><br><button type="submit" name="d">Antwort d</button><br><input type="hidden" name="richtig" value="b"></form>');
    
    
    //3. Aufruf
             $("form").submit(function(event) {
    
        // Das eigentliche Absenden verhindern
        event.preventDefault();
    
        // Das sendende Formular und die Metadaten bestimmen
        var form = $(this);
        var action = form.attr("action"),
            method = form.attr("method"),
            data   = {submit:event.originalEvent.explicitOriginalTarget.attributes.name.value};
    
        // Der eigentliche AJAX Aufruf
        $.ajax({
            url : action,
            type : method,
            data : data
        }).done(function (data) {
            setTimeout(function(){ $("form").replaceWith('Ende'); }, 3000);
    
        });
        });
        });
        });
    </script>
    </body>
    </html>
    Bis dahin funktioniert alles. Will ich jetzt allerdings die Ausgabe der zweiten Frage verzögern, erhalte ich die Fehlermeldung. Siehe //ANFANG VERÄNDERTER CODE.

    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
      <head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
    <div id="grundgeruest">
    
    
        <form action="validate_test.php" method="post">
              <h1 id="frage">Frage
              <hr />
              <button type="submit" name="submit1"><h2>Antwort 1</button><br>
              <button type="submit" name="submit2"><h2>Antwort 2</h2></button><br>
              <button type="submit" name="submit3"><h2>Antwort 3</h2></button><br>
              <button type="submit" name="submit4"><h2>Antwort 4</h2></button><br>
              <input type="hidden" name="richtig" value="submit2">
    
        </form>
    </div>
    <script>
    // 2. Aufruf
    $("form").submit(function(event) {
    
        // Das eigentliche Absenden verhindern
        event.preventDefault();
    
        // Das sendende Formular und die Metadaten bestimmen
        var form = $(this); // Dieser Zeiger $(this) oder $("form"), falls die ID form im HTML exisitiert, klappt übrigens auch ohne jQuery ;)
        var action = form.attr("action"), // attr() kann enweder den aktuellen Inhalt des gennanten Attributs auslesen, oder setzt ein neuen Wert, falls ein zweiter Parameter gegeben ist
            method = form.attr("method"),
            data   = {submit:event.originalEvent.explicitOriginalTarget.attributes.name.value};
    
        // Der eigentliche AJAX Aufruf
        $.ajax({
            url : action,
            type : method,
            data : data
        }).done(function (data) {
    
    //ANFANG VERÄNDERTER CODE
    
            setTimeout(function(){ $("form").replaceWith('<form action="validate_test.php" method="post"><h1 id="frage">Frage</h1><hr /><button type="submit" name="a">Antwort a</button><br><button type="submit" name="b">Antwort b</button><br><button type="submit" name="c">Antwort c</button><br><button type="submit" name="d">Antwort d</button><br><input type="hidden" name="richtig" value="b"></form>');[B] }, 3000);
    
    //ENDE VERÄNDERTER CODE
    
    
    //3. Aufruf
             $("form").submit(function(event) {
    
        // Das eigentliche Absenden verhindern
        event.preventDefault();
    
        // Das sendende Formular und die Metadaten bestimmen
        var form = $(this);
        var action = form.attr("action"),
            method = form.attr("method"),
            data   = {submit:event.originalEvent.explicitOriginalTarget.attributes.name.value};
    
        // Der eigentliche AJAX Aufruf
        $.ajax({
            url : action,
            type : method,
            data : data
        }).done(function (data) {
            setTimeout(function(){ $("form").replaceWith('Ende'); }, 3000);
    
        });
        });
        });
        });
    </script>
    </body>
    </html>
    Ich kann mir vorstellen, dass das ein Logikfehler ist. Weil er wartet 3 Sekunden, bis er das nächste Formular anzeigen will, gleichzeitig führt er aber schon die Prüfung durch, ob ein neuer submit durchgeführt wurde. Jedoch weiß ich nicht, wie ich das verhindern kann. Schöne Grüße

  5. #20
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.500

    AW: click(function() und replaceWith mehrmals ausführen

    Naja - du musst hald das registrieren des submit-Eventlisteners auch in die Funktion vom setTimeout reinpacken.

  6. #21
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    AW: click(function() und replaceWith mehrmals ausführen

    Oh man, natürlich hast du recht. Da habe ich mich aber auch dusselig angestellt. Anstatt alles zu kombinieren, hatte ich versucht, die nächste Abfrage in einen neuen setTimeout zu packen, was nicht funktionierte. Vielen Dank für den Anstoß!

  7. #22
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.500

    AW: click(function() und replaceWith mehrmals ausführen

    Zitat Zitat von JackPott Beitrag anzeigen
    Vielen Dank für den Anstoß!
    Bitte - gern geschehen.

  8. #23
    JackPott ist offline Jungspund
    registriert
    01-04-2017
    Beiträge
    12

    AW: click(function() und replaceWith mehrmals ausführen

    Es geht voran! Das Quiz ist soweit fertig. Nun beschäftige ich mit anderen Fragearten. Derzeit geht es darum, dass ein Lösungswort eingegeben werden muss. Das ist soweit auch kein Problem (ich nutze einfach denselben Code). Mein Formular sieht dann so aus:

    HTML-Code:
    <form action="validate.php" method="post">
    <input name="antwort">
    <input type="hidden" name="richtig" "aaa">
    </form>
    Das schöne ist, dass der o.g. Ajax-Code bereits mit dem Drücken der Enter-Taste umgehen kann und die Anfrage korrekt verarbeitet. Jetzt schwebt mir aber vor, dass beim Tippen schon geprüft wird, ob das Wort stimmt. D.h., falls jemand die Lösung korrekt eingegeben hat, sollte ohne Drücken der Enter-Taste die nächste Frage angezeigt werden.

    Dazu muss ich mit keyup arbeiten, weiß allerdings nicht, wie ich beides kombinieren kann. Sollte der Nutzer nämlich etwas Falsches eingeben, muss beim Drücken von Enter das Skript weiterhin funktionieren. Habt ihr wieder einen Ratschlag?

    Hier noch kurz der Test-Schnipsel:

    Code:
    <form action="validate.php" method="post">
    <input name="antwort">
    <input type="hidden" name="richtig" value="aaa">
    </form>
    <script>
    $("form").submit(function(event) {
        // Das eigentliche Absenden verhindern
        event.preventDefault();
    
        // Das sendende Formular und die Metadaten bestimmen
        var form = $(this); // Dieser Zeiger $(this) oder $("form"), falls die ID form im HTML exisitiert, klappt übrigens auch ohne jQuery ;)
        var action = form.attr("action"), // attr() kann enweder den aktuellen Inhalt des gennanten Attributs auslesen, oder setzt ein neuen Wert, falls ein zweiter Parameter gegeben ist
            method = form.attr("method"),
            data   = form.serialize();
    
        // Der eigentliche AJAX Aufruf
        $.ajax({
            url : action,
            type : method,
            data : data
        }).done(function (data) {
             var riAntwort = $('input[type="hidden"]').val();
             if(data == riAntwort) {
                     $("form").replaceWith('Richtig');
                     }
            else {
                     $("form").replaceWith('Falsch');
                     }
    
    
    
                 });
        });
             </script>

  9. #24
    paul schmitz ist offline Doppel-As
    registriert
    29-03-2015
    Beiträge
    134

    AW: click(function() und replaceWith mehrmals ausführen

    Willst du das wirklich? Dann kann man ja einfach rumprobieren, bis es passt.
    Zur Lösung:
    - Beim Druck von Enter (submit vom Formular) wird "Falsch" angezeigt. Nimm also den Prüfungscode weg, und ersetze es durch einen, der nur falsch anzeigt. Richtige Antworten werden über den onkeyup-Code weitergeschoben, sodass hier nur die falschen ankommen.
    - hinzu kommt ein EventHandler für onkeyup (.keyup() | jQuery API Documentation). Dieser prüft dann so, wie du es jetzt schon tust. Kopiere also einfach deinen jetzigen Prüfungscode dort hinein.
    Rubiks!
    Wer Rechtschreibfehler findet, darf sie behalten (und wegen mir auch aufessen)

Seite 2 von 2 ErsteErste 12

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 07-09-2015, 17:36
  2. Funktion mehrmals ausführen
    Von Taeli im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 14-07-2011, 15:11
  3. Ein JS mehrmals in Schleife ausführen
    Von COP im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 04-11-2008, 11:43
  4. function mehrmals ausführen
    Von Piti im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 07-04-2008, 13:34
  5. Countdown mehrmals ausführen
    Von Hatico im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 29-02-2008, 22:29

Lesezeichen

Berechtigungen

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