php und Ajax


#21
So sieht nun mein Head-Bereich aus:
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script type="text/javascript">
   setInterval(function () {
            $.ajax({
                url: "getdata.php",
                dataType: "json",
                success: mysuccess
            });
        }, 1000);
        function mysuccess(data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i]) {
                    document.getElementById("status" + (i + 1)).src = "1.gif";
                } else {
                    document.getElementById("status" + (i + 1)).src = "0.gif";
                }
            }
        }
 
</script>
So die getdata.php nach dem mysqly-query:
Code:
$status = Array(0,0,0,0);
echo json_encode($status);
Und so der div-container:
Code:
<div id="1">
   <img id="status1" width="100px" height="10px" alt="">
</div>
 
#23
Sorry, habe den Fehler gefunden.
Ich hatte noch kein 0.gif auf dem Server.
Ich dachte, das das 1.gif auf jedenfall verschwindet, wenn Status 0. Dem ist aber nicht so. Das Script will auf jedenfall das Bild austauschen.
 

Sempervivum

Erfahrenes Mitglied
#24
Ja, so ist es. Dann funktioniert es jetzt offenbar.
Ich habe jetzt eine andere Aktivität, wenn doch noch etwas nicht funktioniert, unterstützt dich sicher jemand anders.
Vielleicht bis demnächst - beste Grüße!
 
#25
Auf jeden Fall. Werde öfter mal vorbei schauen.
Scheint jetzt soweit zu funktionieren. Außer beim wechsel von 1.gif auf 0.gif scheint es zu haken. Komisch...
Ich habe jetzt die Abfragezeit von 1 sec auf 5 sec erhöht. jetzt scheint es besser zu funktionieren.

Beste Grüße und noch einmal vielen Dank für die Hilfe.
Chris
 
#26
Ich hab noch was...
Das Script funktioniert nun super. Danke noch Mal an Sempervivum!
Ich würde jetzt gerne mehrere Variablen aus der getdata.php übernehmen und weiterverarbeiten.
Wie baue ich das denn in die setInterval function ein?
Anstelle eines Bildes würde ich in einem div-container gerne einen Text anzeigen, wenn eine der 4 Variablen "1" enthält.
Also so z.B.:
Wenn status[0] eine 1 hat, dann schreibe in den div-container id="alpha" :"Var1 eingeschaltet!"

Ist soetwas möglich?
Die Texte würden in einem Text Array auf getdata.php liegen. Die " Indexe " der beiden Arrays (status und text) passen zusammen. Also wenn status[1] == 1 dann gib den Text von text[1] aus.

Viele Grüße
Chris
 

Sempervivum

Erfahrenes Mitglied
#27
Das ist selbstverständlich kein Problem. Aber wenn wir bei dem Verfahren mit JSON bleiben wollen, müssen alle Parameter in einer Struktur liegen. Das wäre dann auf PHP-Seite ein assoziatives Array und auf JS-Seite ein Objekt, was im wesentlichen das Gleiche ist, wie ein ass. Arr.
Dann müsste die Struktur bzw. das Array so aussehen:
{"status": [1,0,1,1]], "text": ["Var1 eingeschaltet","Var2 eingeschaltet","Var3 eingeschaltet","Var4 eingeschaltet"]}
Die Funktion für die Anzeige müsste dann so aussehen:
Javascript:
        function mysuccess(data) {
            for (var i = 0; i < data.status.length; i++) {
                if (data.status[i]) {
                    document.getElementById("status" + (i + 1)).src = "1.gif";
                    document.getElementById("text" + (i + 1)).textContent = data.text[i];
                } else {
                    document.getElementById("status" + (i + 1)).src = "0.gif";
                    document.getElementById("text" + (i + 1)).textContent = "";
                }
            }
        }
Edit: Oder habe ich es jetzt falsch verstanden und Du möchtest die Texte anstelle der Bilder anzeigen? Wenn ja, kannst Du das Verfahren sicher entspr. vereinfachen.
 
Zuletzt bearbeitet:
#28
Gut das Du wieder da bist. :)
Ist das so eine Art mehrdimensionales Array oder tatsächlich ein assoziatives Array?
Bei einem Assoziativem Array wäre ja status der key und dann gibt es noch einen Index pro key?
Muss mal schauen, wie der genaue Syntax in php ist. Habe bisher noch kein Assoziatives Array gebraucht.
Ich denke es wird Zeit sich wieder mehr mit der Materie zu beschäftigen. Macht wieder richtig Spass.
 
#29
Das sieht doch schon mal gut aus, oder?

Code:
$status = array(1,0,1,1);
$text = array('Variable 1 ein', 'Variable 2 ein', 'Variable 3 ein', 'Variable 4 ein');
$status = array_combine($status, $text);
 

Sempervivum

Erfahrenes Mitglied
#30
Denke eher, dass es das nicht ist: array_combine war mir neu und das setzt lt. Doku voraus, dass ein Array die Schlüssel und das andere die Werte enthält. Das würde nicht funktionieren, weil Schlüsselwerte mehrfach auftreten würde. IMO müsste es eher so aussehen:
$data = array("status" => $status, "text" => $text);
So würde es jedenfalls zu dem JS passen, was ich oben gepostet habe.
 
#31
Guten Morgen,
auch das funktioniert nun. Vielen Dank für Deine Hilfe bisher.
So wie ich das sehe, kann ich dieses Array ja nun beliebig erweitern. Ich denke, ich kann auch auf einzelne Inhalte, unabhängig von der funktion mysuccess() zu greifen, ist das richtig?
Nee doch nicht, das Array wird ja oben von $.ajax geholt und sofort an die funktion mysuccess () übergeben. Hmm, würde ungern die getdata.php includen um an die Variablen zu kommen.
Habe mir gedacht, ich könnte einfach mit einem Print-Befehl (oder so ähnlich) den Inhalt aus z.B. data.date[0] ausgeben.
Mal schauen...
 

Sempervivum

Erfahrenes Mitglied
#32
Ich denke, ich kann auch auf einzelne Inhalte, unabhängig von der funktion mysuccess() zu greifen, ist das richtig?
Das kommt darauf an: Sollen die Informationen ebenso dynamisch jede Sekunde aktualisiert werden, wird es ohne Ajax nicht gehen. Sind es aber zusätzliche statische Informationen, kannst Du diese selbstverständlich beim Laden der Seite mit PHP holen.
 
#33
Oh Mann, bin schon den ganzen Morgen am rumbasteln, aber ich komme nicht dahinter...
Die Schleife scheint nicht durchzulaufen, mir erschließt sich aber nicht, warum das so sein soll.

Hier der Testcode in getdata.php:
Code:
$status = array(0,0,1,0);
$alarm = array("","","Alarm","");
$data = array("status" => $status, "text" => $alarm);
echo json_encode($data);
Hier die Ausgabe bei direktem Aufruf der getdata.php im Browser:
Code:
{"status":[0,0,1,0],"text":["","","Alarm",""]}
Hier das JavaScript:
Code:
<script src="incl/jquery.min.js"></script>
   <script type="text/javascript">
   setInterval(function () {

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

            for (var i = 0; i < data.status.length; i++) {
                if (data.status[i]) {
                    document.getElementById("status" + (i + 1)).src = "1.gif";
                    document.getElementById("text" + (1)).textContent = data.text[i];
                } else {
                    document.getElementById("status" + (i + 1)).src = "0.gif";
                    document.getElementById("text" + (i + 1)).textContent = "Keine Daten";
                }
            }
        }

</script>
Da ist doch nichts falsch, oder?
Beim Aufruf der Seite wird der Text: Keine Daten angezeigt.
Es wird nur bei img id status1 und status 2 das 0.gif geladen.
Bei Status 3 und 4 wird überhaupt kein Bild geladen.
Was kann das sein?
 

Sempervivum

Erfahrenes Mitglied
#34
Ist dies so gewollt:
document.getElementById("text" + (1)).textContent = data.text[i];
Ich würde dies erwarten:
document.getElementById("text" + (i + 1)).textContent = data.text[i];
 
#35
Oje, ich wieder...
Es scheint so, dass das das Problem ist.
Der Text soll ja immer nur an einem Ort angezeigt werden. Deswegen bleibt die ID immer gleich.
Code:
function mysuccess(data) {

            for (var i = 0; i < data.status.length; i++) {
                if (data.status[i]) {
                    document.getElementById("status" + (i + 1)).src = "1.gif";
                    document.getElementById("text1").textContent = data.text[i];
                } else {
                    document.getElementById("status" + (i + 1)).src = "0.gif";
                    document.getElementById("text1").textContent = "Keine Daten";
                }
            }
        }
Ich habe es jetzt so geändert, nun scheint es wieder zu funktionieren.
Muss mal weiter versuchen...
 
#36
Komisch, nun zeigt er zwar das 1.gif an aber in der Box steht : Keine Daten.
Auch wenn ich alle 4 Plätze im Array fülle,
Code:
{"status":[0,0,1,0],"text":["Alarm0","Alarm1","Alarm2","Alarm3"]}
funktioniert es nicht.
 

Sempervivum

Erfahrenes Mitglied
#37
Wenn ich mir den Code ansehe, scheint mir das genau das zu sein, was programmiert ist: Beim letzten Schleifendurchlauf ist der Status 0 und der else-Zweig wird durchlaufen. Dort wird der der Text wieder auf "Keine Daten" gesetzt, obwohl er zuvor auf "Alarm" gesetzt wurde.
Da Du nur ein Textfeld hast, vermute ich mal, Du möchtest eine Sammelmeldung anzeigen, d. h. wenn mindestens ein Status 1 ist, soll ein Text z. B. "Alarm3" angezeigt werden? Dann müsstest Du es so ändern:
Code:
        function mysuccess(data) {

            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];
                } else {
                    document.getElementById("status" + (i + 1)).src = "0.gif";
                }
            }
            document.getElementById("text1").textContent = text;
        }
Ungetestet, ich hoffe, ich habe dich richtig verstanden.
 
#38
Ja das hast Du. :)
Ich werde es sofort mal testen.
Habe gerade zum Spass mal die beiden Arrays (status und text) um zwei weitere Pätze erweitert. Nur bei status (0,0,0,0,0,1) wurde auch der korrekte Text angezeigt. Nämlich: Alarm5. Habe alle Variationen einzeln getestet.
 
#39
:) :) :) Jetzt klappt es. Danke Dir!
Jetzt gehts weiter mit der Darstellung der Alarmmeldungen. Ich habe in der Visualisierung eine niedrige div-box dafür vorgesehen. jetzt versuche ich einen vertikalen Lauftext dort einzubauen.
Das wird wohl noch eine Herausforderung.
Auf jeden Fall bin ich jetzt erstmal happy, dass das so funktioniert. Nun kann ich anfangen, die Arrays mit der Datenbankabfrage zu befüllen. Das sollte ich hinbekommen :) Wegen dem Lauftext oder wenigstens wegen einem Zeilenumbruch für jeden Wert, werde ich sicher noch einmal nerven müssen.
 
#40
Hallo,
wie gesagt hänge ich an dem Zeilenumbruch (Vom vertikalen Lauftext bin ich weg).

Ich weiß, das Steuerzeichen müsste in dieser Variablen-Zuweisung kommen:
Code:
text += data.text[i];
Ich weiß aber nicht, in welcher Form...
+ "<br>" und + \n hab ich schon probiert.
Kann mir jemand helfen? :)