'Display real time without update button
I am trying to make this page auto update the results of the number in real time. The reason for this, is because the same page is used by 5 different people. Right now, it works fine if they click the UPDATE button first. The button displays current number showing in the database. However I want to eliminate the update button so only the Plus and Minus buttons are needed. To do that, the displayed number has to show any updates in real time.
So I ask, how can I make this happen, so the current number shows without having to click the update button first?
Here is the line of code I am thinking is the issue
<input type="number" id="qty" class="count" name="qty2" value="<?php echo $row["number"]; ?>" >
And here is the whole page script
<?php
include 'database.php';
// $sql = "INSERT INTO `number`( `number`)
// VALUES ('$qty')";
$sql = "SELECT number FROM number";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
body {background:none transparent;
}
</style>
<style type="text/css">
.qty {
margin-top: 1rem;
}
body .qty .bg-dark {
background-color: #645612a1!important;
}
body{
body {background:none transparent;
}
}
.qty .count {
color: #000;
display: inline-block;
vertical-align: top;
font-size: 20px;
font-weight: 700;
padding: 0 0px;
min-width: 65px;
text-align: center;
background: #00000036;
}
/*.qty .plus {*/
/* cursor: pointer;*/
/* display: inline-block;*/
/* vertical-align: top;*/
/* color: white;*/
/* width: 30px;*/
/* height: 30px;*/
/* font: 30px/1 Arial,sans-serif;*/
/* text-align: center;*/
/* }*/
/*.qty .minus {*/
/* cursor: pointer;*/
/* display: inline-block;*/
/* vertical-align: top;*/
/* color: white;*/
/* width: 30px;*/
/* height: 30px;*/
/* font: 30px/1 Arial,sans-serif;*/
/* text-align: center;*/
/*}*/
div {
text-align: center;
}
/*.minus:hover{*/
/* background-color: #717fe0 !important;*/
/*}*/
/*.plus:hover{*/
/* background-color: #717fe0 !important;*/
/*}*/
/*Prevent text selection*/
span{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input{
border: 0;
width: 2%;
}
nput::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input:disabled{
background-color:white;
}
#qty{
color:rgb(255, 255, 0);
font-family: monospace;
}
.top-t{
color:white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}
.qty img {
width: 40px;
height: 20px;
margin-top: 0px;
}
</style>
</head>
<body marginwidth="0" marginheight="0">
<div class="qty">
<div class="top-t">
<table width="90%" border="1" cellspacing="0" cellpadding="0" align="left" bgcolor="#000000">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" width="19%" height="2"><!--<span id="butsaveminus" class="minus bg-dark">-</span>-->Available:</td>
<td align="center" valign="top" width="9%" height="2"> <?php
if ($result->num_rows) {
// output data of each row
while($row = $result->fetch_assoc()) {
?>
<input type="number" id="qty" class="count" name="qty2" value="<?php echo $row["number"]; ?>" >
<?php
}
}
$conn->close();
?></td>
<td align="left" valign="top" width="72%" height="2">
<form>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="middle">
<td width="98%" align="left" valign="top"><span id="butsaveminus" class="minus">
<img src="minus.png" width="40" height="20"/></span><span id="butsaveplus" class="plus"><img src="Aadd.png" width="40" height="20"/></span></td>
<td width="2%" valign="top" align="left"><span id="butsaveplus" class="plus">
<input type="button" value="Update" style="height:30px; width:70px" onClick="history.go(0)" name="button2">
</span></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('.count').prop('disabled', true);
$(document).on('click','.plus',function(){
$('.count').val(parseInt($('.count').val()) + 1 );
});
$(document).on('click','.minus',function(){
$('.count').val(parseInt($('.count').val()) - 1 );
});
});
</script>
<script>
$(document).ready(function() {
$('#butsaveminus').on('click', function() {
$("#butsave").attr("disabled", "disabled");
var qty = $('#qty').val();
if(qty!=""){
$.ajax({
url: "minus.php",
type: "POST",
data: {
qty: qty,
},
cache: false,
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$("#butsave").removeAttr("disabled");
$('#fupForm').find('input:text').val('');
$("#success").show();
$('#success').html('Data added successfully !');
}
else if(dataResult.statusCode==201){
alert("Error occured !");
}
}
});
}
else{
alert('Please fill all the field !');
}
});
$('#butsaveplus').on('click', function() {
$("#butsave").attr("disabled", "disabled");
var qty = $('#qty').val();
if(qty!=""){
$.ajax({
url: "save.php",
type: "POST",
data: {
qty: qty,
},
cache: false,
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$("#butsave").removeAttr("disabled");
$('#fupForm').find('input:text').val('');
$("#success").show();
$('#success').html('Data added successfully !');
}
else if(dataResult.statusCode==201){
alert("Error occured !");
}
}
});
}
else{
alert('Please fill all the field !');
}
});
});
</script>
Solution 1:[1]
If you need anything updated in real time from the server then you will need an AJAX call to the server.
Have a field with , and then make an interval to make the ajax call to the server every 5 seconds (5000ms), e.g.:
<script>
setInterval(function() {
$.ajax({url: "/path/to/fetch.php",
success: function(result) {
$(".myanswer").html(result);
}});
}, 5000);
</script>
I'm using jQuery for convenience, but you can make a call without.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Ika Balzam |