Seite bei Formular mit "post" nicht neu laden mit XMLHttpRequest

[Dragosius]

Es wird nichts angezeigt.
Der Text im input-Feld wird erst gar nicht abgeschickt.
Der Code ist oben zu sehen, da muss vermutlich noch ein Fehler drinnen sein?

 

[Sempervivum]

Wirf einen Blick in die Console, da sind noch Fehler drin - Asche auf mein Haupt!

 

[Dragosius]

Ich bin bei JavaScript mit den events und so noch nicht wirklich fit.
Könntest du mir da etwas auf die Sprünge helfen?

 

[Sempervivum]

Gern. Hier habe ich einige Fehler beseitigt:

    <script>
        function doShout(txt) {
            // Daten vorbereiten: Nur wenn ein Text vorhanden ist, diesen eintragen,
            // andernfalls bleibt das Objekt leer
            // data muss zuvor definiert werden.
            let data;
            if (txt) data = { shout: txt };
            else data = {};
            $.ajax({
                type: 'POST',
                url: 'index.php',
                data: data, // Daten uebergeben
                success: function (data1) {
                    $('#shoutbox').html(data1);
                }
            });
        }

        $('#butshout').on('click', (event) => {
            // Da es ein Input ist, muss man den Inhalt mit val() lesen
            const txt = $('#shout').val();
            doShout(txt);
        });
        // Hier war ein Schreibfehler bei setInterVal
        setInterval(doShout, 5000);
    </script>

Außerdem war das a-Tag nicht abgeschlossen.

 

[Dragosius]

Irgendwie wird jetzt ständig die Seite neu geladen, obwohl ich nichts machen?

Liegt das eventuell daran, dass "setInterval(doShout, 5000);" außerhalb der Funktion steht?
Wofür wird das denn an dieser Stelle eigentlich benötigt?

Momentan kann ich gerade nicht testen, da ich nun 504 Gateway Time-out bekomme.
Ich vermute, das war nun zu häufiges neu laden.

Nachtrag:
Es liegt an dieser Zeile.
Ich habe sie auskommentiert und mir wird die Seite nicht mehr ständig neu geladen.

 

[Dragosius]

Es funktioniert aber auch ohne das "setInterval(doShout, 5000);" sehr gut.
Da wird der Bereich auch zeitnah neu geladen.

Jetzt hätte noch noch 2 Fragen:

1.
Wie kann ich denn das input-Feld leeren, nachdem ich auf den Absenden-Button geklickt habe?
Aktuell bleibt der abgesendete Text noch drinnen stehen.

2.
Funktioniert das ganze auch ohne den Absenden-Button, indem man einfach Enter drückt. (Am Besten zusätzlich, also dass der Absenden-Button auch noch funktioniert.)

 

[Sempervivum]

Liegt das eventuell daran, dass "setInterval(doShout, 5000);" außerhalb der Funktion steht?
Wofür wird das denn an dieser Stelle eigentlich benötigt?

Ich denke, damit man auch zu sehen bekommt, was andere Benutzer schreiben. Siehe deinen anderen Thread.

Wie kann ich denn das input-Feld leeren, nachdem ich auf den Absenden-Button geklickt habe?
Aktuell bleibt der abgesendete Text noch drinnen stehen.

Das kannst Du im success-Callback tun:

            $.ajax({
                type: 'POST',
                url: 'index.php',
                data: data, // Daten uebergeben
                success: function (data1) {
                    $('#shoutbox').html(data1);                
                    $('#shout').val('');
                }
            });

 

[Dragosius]

Ich glaube, ich habe durch die Shoutbox-Verbesserungen nun einige Fehler eingebaut.

Diese Fehlermeldung bekomme ich nun ständig in der Konsole:

 

[Sempervivum]

In welcher Zeile tritt denn der Fehler auf? Klicke mal auf die rote Fehlermeldung, dann müsste er zu der betr. Zeile gehen.

 

[Dragosius]

"hole_shoutbox" tritt hier auf: