Я не могу заставить свою кнопку работать. кнопка обновит значения mysql при нажатии. однако, когда я нажимаю кнопку, ничего не происходит. журналы не отображаются на консоли. я что-то здесь упустил?
план состоит в том, чтобы иметь график сверху и таблицу чуть ниже графика. график будет служить живым графиком. значение в таблице будет переключаться между вкл / выкл для имитации управления водяным насосом.
index2_2. php
<?php
require 'mysql.php';
?>
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<!-- jQuery Script -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script>
// jQuery code
// jQuery code available after the page has fully loaded
$(".table #tbody1").on('click', ':button', function(){
id = $(this).prop("id");
console.log('button ' + id + ' pressed');
if($(this).prop('value') == 'ON'){
status = 'OFF';
}else{
status = 'ON';
}
// load table with updated values
$('#tbody1').load("mysql.php", {
id: id,
status: status
}, function(){
console.log('table loaded');
});
});
</script>
<script>
window.onload = function() {
var updateInterval = 2000;
var sensor1Data = [];
var sensor2Data = [];
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
title: {
text: "Soil Moisture Reading"
},
axisX: {
title: "chart updates every " + updateInterval / 1000 + " secs"
},
axisY:{
includeZero: false
},
toolTip: {
shared: true
},
legend: {
cursor:"pointer",
verticalAlign: "top",
fontSize: 22,
fontColor: "dimGrey",
itemclick : toggleDataSeries
},
data: [{
type: "line",
name: "Sensor 1",
dataPoints: sensor1Data
},
{
type: "line",
name: "Sensor 2",
dataPoints: sensor2Data
}]
});
setInterval(function(){updateChart()}, updateInterval);
function toggleDataSeries(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
function updateChart() {
$.getJSON("http://192.168.1.3/Socket-4/getsensor.php", addData);
}
function addData(data){
// try using ID to filter new values.
// eg: newData[i].ID != oldData[i].ID
// only plot new data. shift graph when datapoints > than a value
for (var i = 0; i < data.length; i++) {
if(data[i].sensorName == 'sensor 1'){
sensor1Data.push({
x: new Date(data[i].Date),
y: Number(data[i].sensorValue)
});
}
if(data[i].sensorName == 'sensor 2'){
sensor2Data.push({
x: new Date(data[i].Date),
y: Number(data[i].sensorValue)
});
}
}
chart.render();
}
$.getJSON("http://192.168.1.3/Socket-4/getsensor.php", addData);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="table">
<table>
<thead>
<tr>
<th>ID:</th>
<th>Name:</th>
<th>Status:</th>
</tr>
</thead>
<tbody id='tbody1'>
<?php
getValues();
?>
</tbody>
</table>
</div>
</body>
</html>
mysql. php
<?php
require_once 'mysqldb.php';
include 'socket.php';
if(isset($_POST['id']) and isset($_POST['status'])){
$id = $_POST['id'];
$status = $_POST['status'];
updateValues($id, $status);
getValues();
}
function getValues(){
/*
This function retrieves the values from the database
and store it in an array.
*/
global $db_host, $db_user, $db_pass, $db_name;
$data = array();
/* start connection */
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
/* check connection */
if (mysqli_connect_errno()) {
printf("Connection failed: %s\n", mysqli_connect_error());
exit();
}
$sql = 'SELECT * FROM actuator ORDER BY ID';
if($query = mysqli_query($conn,$sql)){
while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
$data[] = $row;
// Display into html table
echo "<tr>";
echo "<td>{$row['ID']}</td>";
echo "<td>{$row['name']}</td>";
echo "<td>
<input type='button' id='{$row['ID']}' value='{$row['value']}' name='{$row['name']}'>
</td>";
echo "</tr>";
}
/* free result set */
mysqli_free_result($query);
}
/* close connection */
mysqli_close($conn);
socket($data);
}
function updateValues($id, $status){
/*
This function updates the database with
values retrieved from POST.
*/
global $db_host, $db_user, $db_pass, $db_name;
/* start connection */
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
/* check connection */
if (mysqli_connect_errno()) {
printf("Connection failed: %s\n", mysqli_connect_error());
exit();
}
// Prevent SQL injection
$status = mysqli_real_escape_string($conn, $status);
$id = mysqli_real_escape_string($conn, $id);
// $sql = "UPDATE actuator SET value='$status' WHERE ID=$id";
$sql = "INSERT INTO led_control (ID, value, name) VALUES ('$id', '$status', 'water pump')";
mysqli_query($conn,$sql);
/* close connection */
mysqli_close($conn);
}
?>