php und Ajax

[Sempervivum]

<br> sollte funktionieren, oder den Text in ein p-Element legen:

text += '<p>' + data.text[i] + '</p>';

 

[ChrisRoo]

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]

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];

 

[ChrisRoo]

Habs dank Deiner Hilfe hinbekommen.
Musste es nur ein wenig ändern.

document.getElementById("text1").innerHTML = text;

Vielen Dank Sempervivum.
Gruß
Chris

 

[ChrisRoo]

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:

$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>");

$data = array("status" => $status, "text" => $text  "sub" => $sub);

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]

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?

 

[ChrisRoo]

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

 

[ChrisRoo]

Die GIF's sind noch da und für das Blinken zuständig.

 

[Sempervivum]

Wenn ich das jetzt richtig verstehe, brauchst Du ja kein Formular, denn man kann jedes Element klickbar machen, indem man einen Eventhandler registriert:

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.

 

[ChrisRoo]

Wenn dieses Javascript für mich nicht so undurchsichtig wäre.
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