php und Ajax


#42
Hallo Sempervivum,
das ist genau wie beim <br>.
Es wird einfach mit ausgegeben.
Da steht jetzt:
<p>Alarm1</p><p>Alarm2
</p><p>Alarm3</p>
Der Zeilenumbruch kommt von der zu kleinen div-box.
Wenn sie groß genug wäre, dann würde wohl alles in einer Reihe stehen.

Viele Grüße
Chris
 

Sempervivum

Erfahrenes Mitglied
#43
Jetzt wird es mir klar: Ich hatte dir textContent empfohlen, um den Text einzutragen, damit die HTML-Tags interpretiert werden, muss man jedoch innerHTML nehmen:
document.getElementById("text1").innerHTML = data.text[i];
 
#45
Hallo zusammen,
ich habe bezüglich des Javascriptes noch eine Frage:
Kann man auch dynamisch html-code an eine bestimmte Stelle einfügen lassen, der dann auch ausgeführt wird.
Das hier habe ich versucht:

Code:
$status = array(1,0,1,0);
$text = array("Alarm1","Alarm2","Alarm3","Alarm4");
$sub = array("<form action='' method='post'><button name='submit1'
             id='subInput' type='submit'></button></form>",
             "<form action='' method='post'><button name='submit2'
             id='subInput' type='submit'></button></form>",
             "<form action='' method='post'><button name='submit3'
             id='subInput' type='submit'></button></form>",
             "<form action='' method='post'><button name='submit4'
             id='subInput' type='submit'></button></form>");
Code:
$data = array("status" => $status, "text" => $text  "sub" => $sub);
Code:
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";
                    document.getElementById("status" + (i + 1)).textContent = data.sub[i];
                          text += data.text[i] + '<br>';
                } else {
                    document.getElementById("status" + (i + 1)).src = "0.gif";
                }
            }
                 document.getElementById("text1").innerHTML = text;

        }
Die Submitbuttons sollen in den div-containern status1-4 dargestellt werden, wenn $status == 1
Muss das vielleicht auch mit .innerHTML gemacht werden?

Viele Grüße
Chris
 

Sempervivum

Erfahrenes Mitglied
#46
Die Submitbuttons sollen in den div-containern status1-4 dargestellt werden, wenn $status == 1
Muss das vielleicht auch mit .innerHTML gemacht werden?
Ja, innerHTML ist ein guter und leicht lesbarer Weg. Du kannst auch zu vorhandenem HTML etwas hinzufügen. Performanter ist es, die Elemente mit document.createElement zu erzeugen, aber wenn es nur einige sind, spielt das keine Rolle.
Was mir noch nicht klar ist: Am Anfang gab es ja diese GIF-Bilder. Sollen diese Buttons zusätzlich angelegt werden oder sollen sie jetzt anstelle der Bilder angelegt werden?
Außerdem ist noch anzumerken: IDs müssen eindeutig sein, d. h. die selbe ID darf nicht mehrfach vergeben werden. Du müsstest z. B. eine Nummer hinzu fügen.
Ein Formular, das nur einen Submit-Button enthält, macht wenig Sinn. Was soll denn dieser Button bewirken, wenn man ihn drückt?
 
#47
Hallo Sempervivum,
Die Buttons gibt es hinterher garnicht mehr. Der ganze Div-Container soll zum Button werden und als Reset dienen.Das habe ich schon mit CSS gelöst. Zur Erklärung:
Der Div-Container blinkt bei einem Alarm. Wenn er angeklickt wird, soll der Alarm resetet werden.
Also insgesamt sind es 16 Container.
Viele Grüße
Chris
 

Sempervivum

Erfahrenes Mitglied
#49
Wenn ich das jetzt richtig verstehe, brauchst Du ja kein Formular, denn man kann jedes Element klickbar machen, indem man einen Eventhandler registriert:
Code:
var stati = document.querySelectorAll("[id^='status']");
for (let i = 0; i < stati.length; i++) {
    stati[i].addEventListener("click", function() {
        // hier die Aktionen, die beim Klick ausgefuehrt werden sollen
        // das geklickte Element ist als "this" verfuegbar
    });
}
Bleibt die Frage, wie das Reset ausgeführt wird. Ich vermute, da muss etwas zum Server geschickt werden? Wahrscheinlich am besten mit Ajax, damit die Seite nicht neu geladen wird.
 
#50
Wenn dieses Javascript für mich nicht so undurchsichtig wäre. o_Oo_O
Ich muss mich unbedingt mehr damit beschäftigen.
Also, ich brauche einfach nur eine Klick fähige Fläche (der betreffende div-Container).
Wie das Reset schließlich ausgeführt wird bzw. was nach dem Klick passiert, weiß ich selbst noch nicht so genau. Eigentlich müsste etwas zum Mikrocontroller gesendet werden, oder der Mikrocontroller müsste in seiner Schleife in der Datenbank nachsehen, ob ein Reset über die Website gesendet oder in der Datenbank gespeichert wurde. Ich dachte, dass kann man am besten über einen Submit-Button (Formular) machen, in dem man in der Datenbank ein "Flag" setzt, dass der Mikrokontroller abfragt. Alarmzeit mit Flag-Setzzeit vergleichen. Alarmzeit früher als Flag-Setzzeit == Alarm aufheben bzw. ignorieren. Wie geschrieben, hab ich noch nicht den richtigen Weg im Kopf. Ich wollte nur schon mal fragen, wie eine mögliche Variante umzusetzen wäre.
Danke auf jeden Fall für Dein Interesse an meinem Projekt.

Chris
 

Sempervivum

Erfahrenes Mitglied
#51
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.
 
#52
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. :unsure: 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

Erfahrenes Mitglied
#53
Es ist schon alles da, wir müssen es nur richtig zusammen fügen:
Code:
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.
 
Zuletzt bearbeitet:
#55
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?
Code:
<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
 
#56
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

Erfahrenes Mitglied
#57
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.
 
#58
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
 

Neue Beiträge