• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Icon wechsel je nach Datenbank Einstellung

S

siod

Neues Mitglied
Hallo,

ich möchte auf meiner ersten selbst erstellten Homepage im meinem LAN diverse Funksteckdosen ansteuern. Dazu klicke ich auf ein Lampensymbol, die Funksteckdose wird geschaltet und ein Eintrag in einer Datenbank vorgenommen (An oder Aus). Alles klappt soweit.
Leider bekomme ich es jedoch nicht hin, dass das image der Lampe nach einem Klick von "An" auf "Aus" geändert wird, ohne das ich den refresh button des Browsers drücken muss. Ich bin jetzt soweit, dass ich mit Ajax genau dies eigentlich hinbekomme, aber es verhält sich sehr komisch. Klicke ich beim ersten Mal auf das Lampensymbol, passiert gar nichts, beim 2. Klick wird der Befehle dann gleich 2 mal ausgeführt, beim 3. Mal 3 mal usw. . Ich kann mir das nicht erklären, unten mal mein Code:

HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Home-Page</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>

<body>
<!--Script Bereich-->
<script>
//Funktion für Lampen
function change_state(){
$('#LampTV').click(function() {
        var LampTVObj = $(this);
        $.ajax({
            type: "POST",
            url: 'PHP/updateStateLampeTV.php',
            success: function(data) {
                //In your php you need to echo the URL of the status image
                //like this
                //echo 'http://example.com/images/online.png';
                $(LampTVObj).attr('src', data);
                return false;
            }
        });
    });
}
</script>
<!--Script Bereich ENDE-->
<?php
include ("PHP/icon_state.php");
error_reporting(-1);
ini_set('display_errors', TRUE);



?>
<img id="LampTV" src="<?php Lampe($qLTV, $queryLTV); ?>" onclick='change_state()'>
</body>
</html>

PHP: 
<?php
error_reporting(-1);
ini_set('display_errors', TRUE);

    // Connect to MySQL
    include("dbconnect.php");
    //Funktion zur Abfrage des aktuellem Zustandes in der Datenbank

    // Datenbank auswählen
    mysql_select_db("homecontrol") or die(mysql_error());

// SQL-Query
    $queryLTV = "SELECT Zustand FROM `funksteckdosen` WHERE Standort= 'Lampe TV'";
// Query ausführen (die Datensatzgruppe $rs enthält das Ergebnis)
    $qLTV = mysql_query($queryLTV);
//Status Lampe
    function statusLampe(){
    global $queryLTV;
    global $qLTV;

        while ($datensatz = mysql_fetch_assoc($qLTV)){
    $z = $datensatz['Zustand'];
    }
    if ($z == "An"){
        $SQL = "UPDATE funksteckdosen SET Zustand = 'Aus' WHERE `funksteckdosen`.`Standort` = 'Lampe TV'";   
        // Execute SQL statement
        mysql_query($SQL);
        echo "../gfx/ligthbulb_on.png";
    }
        elseif($z == "Aus"){
        $SQL = "UPDATE funksteckdosen SET Zustand = 'An' WHERE `funksteckdosen`.`Standort` = 'Lampe TV'";   
        // Execute SQL statement
        mysql_query($SQL);
        echo "../gfx/ligthbulb_off.png";
        }
    }
statusLampe();
?>

Irgend eine Idee? Ich versuche es nun schon seit Wochen hin zu bekommen, ist halt alles neu für mich... Danke für Eure Hilfe!
 
siod schrieb:
Hallo,

ich möchte auf meiner ersten selbst erstellten Homepage im meinem LAN diverse Funksteckdosen ansteuern. Dazu klicke ich auf ein Lampensymbol, die Funksteckdose wird geschaltet und ein Eintrag in einer Datenbank vorgenommen (An oder Aus). Alles klappt soweit.
Leider bekomme ich es jedoch nicht hin, dass das image der Lampe nach einem Klick von "An" auf "Aus" geändert wird, ohne das ich den refresh button des Browsers drücken muss. Ich bin jetzt soweit, dass ich mit Ajax genau dies eigentlich hinbekomme, aber es verhält sich sehr komisch. Klicke ich beim ersten Mal auf das Lampensymbol, passiert gar nichts, beim 2. Klick wird der Befehle dann gleich 2 mal ausgeführt, beim 3. Mal 3 mal usw. . Ich kann mir das nicht erklären, unten mal mein Code:

HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Home-Page</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>

<body>
<!--Script Bereich-->
<script>
//Funktion für Lampen
function change_state(){
$('#LampTV').click(function() {
        var LampTVObj = $(this);
        $.ajax({
            type: "POST",
            url: 'PHP/updateStateLampeTV.php',
            success: function(data) {
                //In your php you need to echo the URL of the status image
                //like this
                //echo 'http://example.com/images/online.png';
                $(LampTVObj).attr('src', data);
                return false;
            }
        });
    });
}
</script>
<!--Script Bereich ENDE-->
<?php
include ("PHP/icon_state.php");
error_reporting(-1);
ini_set('display_errors', TRUE);



?>
<img id="LampTV" src="<?php Lampe($qLTV, $queryLTV); ?>" onclick='change_state()'>
</body>
</html>

PHP: 
<?php
error_reporting(-1);
ini_set('display_errors', TRUE);

    // Connect to MySQL
    include("dbconnect.php");
    //Funktion zur Abfrage des aktuellem Zustandes in der Datenbank

    // Datenbank auswählen
    mysql_select_db("homecontrol") or die(mysql_error());

// SQL-Query
    $queryLTV = "SELECT Zustand FROM `funksteckdosen` WHERE Standort= 'Lampe TV'";
// Query ausführen (die Datensatzgruppe $rs enthält das Ergebnis)
    $qLTV = mysql_query($queryLTV);
//Status Lampe
    function statusLampe(){
    global $queryLTV;
    global $qLTV;

        while ($datensatz = mysql_fetch_assoc($qLTV)){
    $z = $datensatz['Zustand'];
    }
    if ($z == "An"){
        $SQL = "UPDATE funksteckdosen SET Zustand = 'Aus' WHERE `funksteckdosen`.`Standort` = 'Lampe TV'";
        // Execute SQL statement
        mysql_query($SQL);
        echo "../gfx/ligthbulb_on.png";
    }
        elseif($z == "Aus"){
        $SQL = "UPDATE funksteckdosen SET Zustand = 'An' WHERE `funksteckdosen`.`Standort` = 'Lampe TV'";
        // Execute SQL statement
        mysql_query($SQL);
        echo "../gfx/ligthbulb_off.png";
        }
    }
statusLampe();
?>

Irgend eine Idee? Ich versuche es nun schon seit Wochen hin zu bekommen, ist halt alles neu für mich... Danke für Eure Hilfe!
Zum Vergrößern anklicken....

Ist ja klar:
Erst beim Klick auf das Bild wird der Click-Listener zugewiesen:

Code: 
function change_state(){
  $('#LampTV').click(function() {...

Beim zweiten Klick auf das Bild, wird erst der schon vorhandene Click-Listener ausgeführt und anschließend noch mal ein neuer hinzugefügt.
Beim dritten Klick werden die vorigen 2 Click-Events noch mal ausgeführt plus wieder ein neuer hinzugefügt. Und so geht es weiter.

Du kannst dir das weitere hinzufügen von Click-Listenern sparen, da du mit onclick="change_state()" bereits einen hinzugefügt hast:

Code: 
function change_state(){
  //$('#LampTV').click(function() {
        var LampTVObj = $(this);
        $.ajax({
            type: "POST",
            url: 'PHP/updateStateLampeTV.php',
            success: function(data) {
                //In your php you need to echo the URL of the status image
                //like this
                //echo 'http://example.com/images/online.png';
                $(LampTVObj).attr('src', data);
                return false;
            }
        });
    //});
}

Da du sowohl in PHP sowie in JS Funktionen falsch einsetzt, solltest du dich wohl noch mal genauer damit beschäftigen.
 
Hallo Danke für den Tipp. Ich setze mich mit der Thematik jetzt schon seit Wochen auseinander, ein Profi werde ich dennoch leider nicht mehr...Ich brauche AJAX eigtl. nur dafür dieses Icon ohne refresh zu aktualisieren, mehr möchte ich ja gar nicht!

Dank Deines Tipps wird der Klick tatsächlich immer nur einmal ausgeführt, allerdings muss ich jetzt die Seite wieder erst refreshen um das aktuelle Icon-Image zu sehen. :(

edit: Jaaaaa! Ich habs endlich hinbekommen!! Dank Deines Tipps :D
Hab mir den Code nochmal in Ruhe angeschaut und folgendermaßen abgeändert:

PHP: 
var LampTVObj = $('#LampTV');

nun funktioniert es endlich!!

Also Danke nochmal für die Hilfe. Was ich nur nicht verstehe, warum wird es in meinem ersten Versuch nicht sofort 2 mal ausgeführt sondern erst beim 2. Klick? Kann ich das noch irgendwo gezielt nachlesen? Und was stimmt denn bei meinem PHP Code nicht?

edit2:
aah, jetzt hats auch bei mir Klick gemacht, war wohl gestern zu lange dran...

HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Home-Page</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>

<body>
<!--Script Bereich-->
<script>
//Funktion für Lampen
$(document).ready(function() {
$('#LampTV').on('click', function() {
        var LampTVObj = $(this);
        $.ajax({
            type: "POST",
            url: 'PHP/updateStateLampeTV.php',
            success: function(data) {
                //In your php you need to echo the URL of the status image
                //like this
                //echo 'http://example.com/images/online.png';
                $(LampTVObj).attr('src', data);
               
            }
        });
    });
})

</script>
<!--Script Bereich ENDE-->
<?php
include ("PHP/icon_state.php");
error_reporting(-1);
ini_set('display_errors', TRUE);



?>
<img id="LampTV" src="<?php Lampe($qLTV, $queryLTV); ?>">
</body>
</html>
 
Zuletzt bearbeitet:
siod schrieb:
Hallo Danke für den Tipp. Ich setze mich mit der Thematik jetzt schon seit Wochen auseinander, ein Profi werde ich dennoch leider nicht mehr...Ich brauche AJAX eigtl. nur dafür dieses Icon ohne refresh zu aktualisieren, mehr möchte ich ja gar nicht!

Dank Deines Tipps wird der Klick tatsächlich immer nur einmal ausgeführt, allerdings muss ich jetzt die Seite wieder erst refreshen um das aktuelle Icon-Image zu sehen. :(

edit: Jaaaaa! Ich habs endlich hinbekommen!! Dank Deines Tipps :D
Hab mir den Code nochmal in Ruhe angeschaut und folgendermaßen abgeändert:

PHP: 
var LampTVObj = $('#LampTV');

nun funktioniert es endlich!!

Also Danke nochmal für die Hilfe. Was ich nur nicht verstehe, warum wird es in meinem ersten Versuch nicht sofort 2 mal ausgeführt sondern erst beim 2. Klick? Kann ich das noch irgendwo gezielt nachlesen? Und was stimmt denn bei meinem PHP Code nicht?
Zum Vergrößern anklicken....

Also $('#element').click(function () {}) bedeutet nicht: "Klick jetzt auf #element" sondern "Beim Klick auf #element mach das was in der Funktion steht". Beim ersten Klick wurde also erst definiert, was beim nächsten Klick passieren soll.

Deshalb meinte ich auch, du verstehst den Sinn von Funktionen noch nicht. Sinn ist es nämlich den Code in einer Funktion mehrfach bzw. erst später einsetzen zu können. Du nutzt Funktionen jedoch so, als wären sie nur einmal und für einen bestimmten Zweck einsetzbar und würden sofort ausgeführt.

zB ist es überflüssig den PHP Codeabschnitt in statusLampe in eine Funktion zu stecken. Erstens verwendest du globale Variablen statt Funktionsparametern (Absolutes NoGo), zweitens wird sie ohnehin sofort ausgeführt und drittens wird diese Funktion an keiner weiteren Stelle benötigt. Unter gewissen Umständen kann so ein ähnliches Konstrukt hilfreich sein (http://en.wikipedia.org/wiki/Immediately-invoked_function_expression), allerdings nicht in deinem Fall und auch nicht in PHP.
 
Ah Ok, Danke. Jetzt verstehe ich was Du meinst. Die Funktion StatusLampe sieht aktuell so aus weil ich noch am rumexperimentieren bin. Zukunftig wird aus StatusLampe Status(Gerät) oder so ahnlich, so dass ich mit einer Funktion diverse Geräte schalten kann.

Und auch nochmal Danke für die Erklärung zur click() Funktion, auch das habe ich jetzt verstanden!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben