jquery按钮未执行
jquery按钮未执行
提问于 2020-04-29 06:00:29
我的按钮好像不能工作了。按钮将在按下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);
}
?>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-29 06:22:54
也许事件处理程序
$(".table #tbody1").on('click', ':button', function(){在呈现按钮之前调用。
将Handler放入
$( document ).ready(function() {喜欢
<script>
$( document ).ready(function() {
// 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>Stack Overflow用户
发布于 2020-04-29 06:18:04
你可以改变回声
echo "<td>
<input type='button' id='{$row['ID']}' value='{$row['value']}' name='{$row['name']}' onClick=test({$row['ID']})>
</td>";和剧本：
function test(index){
....
}或
echo "<td>
<input class = 'nameofclass' type='button' id='{$row['ID']}' value='{$row['value']}' name='{$row['name']}' onClick=test({$row['ID']})>
</td>";
$('table#tbody1').on('click','button.nameofclass',function(e) {页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61495212
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号