php und Ajax

[Sempervivum]

Ich dachte, dass kann man am besten über einen Submit-Button (Formular) machen

Im Prinzip ist das möglich, hat jedoch, wie gesagt, den Nachteil, dass beim Submit die ganze Seite neu geladen wird. Und da Du ja schon mit Ajax begonnen hast, würde es sich anbieten, den Befehl für das Rücksetzen ebenfalls mit Ajax zu schicken. Ajax ermöglicht es generell, eine Datei auf dem Server auszulesen bzw. auszuführen, wenn es sich um ein PHP-Skript handelt. Bisher hat Du es dazu benutzt, Daten vom Server zu holen, aber es ist genau so möglich, eine Aktion auf dem Server zu veranlassen, wie das Reset, das Du beschreibst bzw. einen Eintrag in der Datenbank zu veranlassen.

 

[ChrisRoo]

Was Du schreibst, macht für mich absolut Sinn und es wäre natürlich toll, wenn die Seite nicht nach jedem Klick neu laden würde. Das wäre auch für die nachfolgenden Funktionen gut, bei denen ich Schalter aktivieren möchte, die nach dem Klick auch noch weiter "leuchten" sollen.
Aber das kommt noch später...
Wie Du dir sicher schon denken kannst, ist mir nun nur nicht schlüssig, wie ich das mit dem eventListener über Ajax lösen kann. Könntest Du mir da auf die Sprünge helfen?

Übrigens, könntest Du mir ein Buch zu dem Thema Javascript und Ajax empfehlen?

Viele Grüße
Chris

 

[Sempervivum]

Es ist schon alles da, wir müssen es nur richtig zusammen fügen:

var stati = document.querySelectorAll("[id^='status']");
for (let i = 0; i < stati.length; i++) {
    stati[i].addEventListener("click", function() {
            $.ajax({
                url: "reset.php",
                method: "post",

                // Die Daten, die an den Server geschickt werden
                // Die Nummer ist im PHP-Skript als POST-Variable verfügbar:
                // $_POST['nr']
                data: {nr: (i + 1)},

                success: successForReset
            });
    });
}

Ungetestet, wenn es nicht funktioniert, mache ich eine Testdatei.

 

[Sempervivum]

Leider habe ich keine Empfehlung für ein Buch, ich habe mir immer alles, was ich wissen wollte, im Netz heraus gesucht. Ganz gut für den Einstieg könnte dieses sein:
JavaScript-Tutorial / Ajax-Kurs und jQuery lernen

 

[ChrisRoo]

Hallo Sempervivum,

sorry, musste gestern in die Kiste. 04:30 Uhr klingelt mein Wecker.
Also, wenn ich das richtig verstehe, ist das nun ein Eigenständiges Programm, welches ich unter das bestehende Script schreibe. Es passt auf, in welchen div-Container geklickt wird und schickt dann einen entsprechenden Request an die reset.php.
Ist das richtig?

So muss ich es zusammenbauen?

<script type="text/javascript">
   setInterval(function () {

            $.ajax({
                url: "getdata.php",
                dataType: "json",
                success: mysuccess
            });
        }, 1000);

          function mysuccess(data) {
               document.getElementById("alarmZeit0").textContent = data.alarmZeit;
                document.getElementById("text1").textContent = "Keine Daten";
            var text = "";
            for (var i = 0; i < data.status.length; i++) {
                if (data.status[i]) {
                    document.getElementById("status" + (i + 1)).src = "1.gif";
                          text += data.text[i] + '<br>';
                } else {
                    document.getElementById("status" + (i + 1)).src = "0.gif";
                }
            }
                 document.getElementById("text1").innerHTML = text;

        }
var stati = document.querySelectorAll("[id^='status']");
for (let i = 0; i < stati.length; i++) {
    stati[i].addEventListener("click", function() {
            $.ajax({
                url: "reset.php",
                method: "post",

                // Die Daten, die an den Server geschickt werden
                // Die Nummer ist im PHP-Skript als POST-Variable verfügbar:
                // $_POST['nr']
                data: {nr: (i + 1)},

                success: successForReset
            });
    });
}
</script>

Ich verstehe nur noch nicht so ganz, was es mit der $_POST['nr'] auf sich hat und wie das Script weiß, welcher div-Container angeklickt wurde.
Viele Grüße
Chris

 

[ChrisRoo]

Oh, jetzt hab ich es glaube ich...
Das Script schaut, welcher div-Container geklickt wird, in der for-Schleife bekommt dann "nr" die Nummer des geklickten div-containers mit. Die kann dann die reset.php über $_POST[nr] auswerten und dementsprechend einen Reset auslösen.
Stimmt das so?
Gruß
Chris

 

[Sempervivum]

Ich hatte vor einer halben Stunde angefangen, eine Antwort zu schreiben und bin dann durch einen Anruf aufgehalten worden. Ich mache mal dort weiter:

Also, wenn ich das richtig verstehe, ist das nun ein Eigenständiges Programm, welches ich unter das bestehende Script schreibe. Es passt auf, in welchen div-Container geklickt wird und schickt dann einen entsprechenden Request an die reset.php.
Ist das richtig?

Ja, ist richtig so. Nur die Zeile mit dem success: successForReset kannst Du zunächst weg lassen, bis wir wissen, dass wir sie brauchen.

Das Script schaut, welcher div-Container geklickt wird, in der for-Schleife bekommt dann "nr" die Nummer des geklickten div-containers mit. Die kann dann die reset.php über $_POST[nr] auswerten und dementsprechend einen Reset auslösen.

Genau so ist es, ohne den Post-Parameter müsstest Du für jeden Status ein eigenes Skript schreiben und es wäre sehr änderungsunfreundlich, weil Du jedes Mal in n Skripts ändern müsstest.

 

[ChrisRoo]

Sehr gut, Javascript gefällt mir immer besser. Bin wirklich froh, dass Du dir die Zeit nimmst, mir Javascript-Legasteniker unter die Arme zu greifen. Leider kann ich gerade nicht weiter am Programm arbeiten, weil ich unterwegs bin. Werde mich aber gleich morgen Nachmittag wieder dransetzen.
Der Link von Dir ist auch super. Das schau ich mir heute Abend am Tablet an.
Bis morgen...
Chris