for weeks now I´m trying to setup my new homepage that runs on my LAN on a raspberry pi running Raspbian.
What I want to do is save the state of some RC Switches in a database and show the actual states on my website. I´ve already set up my database, what I want now is, that icons get updated by the status of the RC switches in the databse. For example I have an icon "lightbulb_off" and "lightbulb_on". If database says light 1 is off, "lightbulb_off" shall show up.
I am at a point where everything works, but I have to reload the page everytime I clicked on an icon, what switches the RC Switch and updates the database, to see the new icon. I want the icon to change without reloading the page. I tried a lot to combine jscript and PHP using AJAX, but I don´t get it.
Here is my code:
<img id="LampTV" src=<?php Lampe($qLTV, $queryLTV); ?> onclick="Lampe('http://192.168.1.66/index.html?schalte&9'), updateStateLampeTV()">
So src= Lampe() reads the database for the actual state. After clicking the RC Switch switches and the database gets updated.
Now, how can I change the icon without reloading the page again? I guess it won´t work with PHP but I don´t know how to achieve it using AJAX.
Thanks for yout help!!
Update:
Now I created this function:
function icon(){$(document).ready(function(){$.ajax({url: 'PHP/icon_state.php',type:post',data: {'Lampe($qLTV, $queryLTV)'},success: function(data,status)
It shall run a function in my php file which echos a path to the correct iconfile. Doesn´t wotk this way :(
You need to use Ajax. As I see in the comments, you tried to do something.
So, you have an id for your image, what is great. We can bind a click function to it. Pass the data what you want in the data section as an object, (or query string or array), and in the success function of ajax, update the source of your original image object.
$('#LampTV').click(function() {
var qLTV = 'Some data what you need to pass';
var queryLTV = 'Some other data, what you want'
var LampTVObj = $(this);
$.ajax({
type: "POST",
url: 'PHP/icon_state.php',
data: {
qLTV: qLTV,
queryLTV: queryLTV
}, 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);
}
});
});
For testing purposes I created a new file "test.php". Here is the code of that file:
<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>
and here we have the 'updateStateLampeTV.php' file:
<?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();
?>
Don´t look at my comments, they are german...
Well, when I click on the icon the first time nothing happens, on the second click Firebug tells me 2 times "POST http://myIP/PHP/updateStateLampeTV.php" (I must mention that "updateStateLampeTV.php = icon_state.php with different echoes). On the next click it´s sent 3 times and so on. Do you see where the error is?