Seite 2 von 2 ErsteErste 12
Ergebnis 16 bis 22 von 22
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.380

    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
    11

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

    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
    11

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

    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
    11

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

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

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

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
  •