I trying control a "status" of 3 buttons using HTML/PHP + Ajax/javascript + Mysql.
I can click on button and:
- Button on 'div' tag and go to script java that manager the get to load;
- Update bd;
- Change the image that is my button (after query on altered bd);
There is my codes:
index.php: on head
<script>
$(function () {
$('#button div').click(function () {
var nameDiv = $(this).attr('id');
var last = nameDiv.charAt(nameDiv.length - 1)
$("#" + nameDiv).load("change.php?num=" + last);
});
});
</script>
on body:
<div id="button">
<div id="button1"><?php QueryStateButton(1); ?><br /></div>
<div id="button2"><?php QueryStateButton(2); ?><br /></div>
<div id="button3"><?php QueryStateButton(3); ?><br /></div>
</div>
my function:
function QueryStateButton($num) {
include 'conection.php';
$query = 'SELECT * FROM button WHERE id =' . $num;
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
$place = $row['place'];
$status = $row['status'];
}
if ($status == 1) {
echo '<img src="image/on.png"><br />' . $place;
} else {
echo '<img src="image/off.png"><br />' . $place;
}
mysqli_close($link);
}
another:
function changeStatusButton($num) {
$status = queryStatus($num);
include 'conection.php';
if ($status == 0) {
$query = 'UPDATE button SET status = 1 WHERE id =' . $num;
} else {
$query = 'UPDATE button SET status = 0 WHERE id =' . $num;
}
$result = mysqli_query($link, $query);
mysqli_close($link);
QueryStateButton($num);
}
Just scope:
//take the status for button on bd
function queryStatus($num) {
...
}
change.php
<?php
$num = $_GET['num'];
include 'functions.php';
$resul = changeStatusButton($num);
?>
My problem is this:
I need be able to click image inside div and change the state of this button on bd. Same time I need the return this state via ajax/javascript and change the image on browser "alive".
For example: I click the button on my tablet and my son on PC see the change ON to OFF (or OFF to ON) without need to refresh the page.
How is this possible?
I don't want to use Node.js (because I think a very complex and cannot understood how to do this).
I saw for long_polling and comet strategies, but this is possible using php/html + ajax/javascript + mysql?