We help IT Professionals succeed at work.

Refresh a value from a table in JavaScript

Ahmad Jaber
Ahmad Jaber asked
on
Hi all,
I am asking for your help on a small project that I am implementing, that of updating a value in my database.
Since there is a value to enter in a textbox, I cannot load everything (well I think) on another page and refresh every second ...
Here is my complete code and I can't refresh Enchere_Max

Sans-titre.png
index.php
<?php try{$Stat = $pdo->query("SELECT * FROM tb_shop_enchere"); while($data = $Stat->fetch(PDO::FETCH_ASSOC)) { $MyId = $data["NumId"]; ?>

<div id="Enchere_<?php echo $MyId; ?>"></div>

<script>
$(document).ready(function() {
	setInterval(function() {
		$('#Enchere_<?php echo $MyId; ?>').load('refresh.php');
	}, 1000);
});
</script>

<?php }}catch(PDOException $e){echo "<div class='alert alert-danger'>".$e->getMessage()."</div>";} ?>

Open in new window


refresh.php
<?php try{$Stat = $pdo->query("SELECT * FROM tb_shop_enchere WHERE NumId = '".$MyId."'"); while($data = $Stat->fetch(PDO::FETCH_ASSOC)) { ?>

<?php echo $data["Enchere_Max"];?>

<?php }}catch(PDOException $e){echo "<div class='alert alert-danger'>".$e->getMessage()."</div>";} ?>

Open in new window

Maybe my method is not the right one, so if you can help me it would be nice.
Comment
Watch Question

Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:

Seems you have your script inside a loop?


If so you will have

<div id="Enchere_<?php echo $MyId; ?>"></div>
<script>
$(document).ready(function() {
	setInterval(function() {
		$('#Enchere_<?php echo $MyId; ?>').load('refresh.php');
	}, 1000);
});
</script>
<div id="Enchere_<?php echo $MyId; ?>"></div>
<script>
$(document).ready(function() {
	setInterval(function() {
		$('#Enchere_<?php echo $MyId; ?>').load('refresh.php');
	}, 1000);
});
</script>
<div id="Enchere_<?php echo $MyId; ?>"></div>
<script>
$(document).ready(function() {
	setInterval(function() {
		$('#Enchere_<?php echo $MyId; ?>').load('refresh.php');
	}, 1000);
});
</script>

and that is not a great idea. IDs need to be unique


You also may need to bust the cache for refresh.php by adding a random value to the call

Author

Commented:

I don't know if I got it right, but you want me to get the refresh call out of the loop?

<?php try{$Stat = $pdo->query("SELECT * FROM tb_shop_enchere"); while($data = $Stat->fetch(PDO::FETCH_ASSOC)) { $MyId = $data["NumId"]; ?>

<div id="Enchere_<?php echo $MyId; ?>"></div>

<?php }}catch(PDOException $e){echo "<div class='alert alert-danger'>".$e->getMessage()."</div>";} ?>

<script>
$(document).ready(function() {
setInterval(function() {
$('#Enchere_<?php echo $MyId; ?>').load('enchere-refresh.php');
}, 1000);
});
</script>


enchere-refresh.php

<?php echo $data["Enchere_Max"];?>

If this example is what you are asking, how should I tell <?php echo $data["Enchere_Max"]; ?> Which belongs to the identifier $MyId?

I'm really lost there ...

Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:

I am not sure you want to do it that way

What does refresh.php do?

Can it be passed an ID or perhaps passed an array of IDs and return all of them? It is not clear from your code what the contents of each div is. 

Can you show me what you expect to see on the page and what refresh returns?

Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:

Perhaps you mean something like this (not tested - may need some work with closures)


let tId = {};
$(function() {
  $(".escherir").on("click",function() { // any click on a button with class = escherir
    const $div = $(this).closest("div[id^=Enchere]");
    const id = $div.attr(id); // the container ID
    cont val = $div.find("input").val(); // I do not know the input field - so change if needed
    clearInterval(tId[id])
    tId[id] = setInterval(function() { $(id).load("refresh.php?myId="+id+"&val="+val },1000);
  });
)};


Thank you very much Michel Plungjan!
Your code inspired me and I solved the problem.


$(document).ready(function() {
setInterval(function() {
$('#Enchere_<?php echo $MyRef; ?>').load('enchere-refresh.php?MyRef=<?php echo $MyRef; ?>');
$('#Nombre_<?php echo $MyRef; ?>').load('enchere-refresh-nb.php?MyRef=<?php echo $MyRef; ?>');
}, 1000);
});
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:

Ok... That is two server calls per second. Why not call one server process that returns two values, one for   Enchere and one for   Nombre

Author

Commented:

You're absolutely right.
But I'm not really good at js or ajax ...
Here is the refresh.php page :

<?php
if(isset($_GET['MyRef'])){
$MyRef = htmlspecialchars($_GET['MyRef']);

$Stat = $pdo->query("SELECT MAX(Enchere) AS Enchere FROM tb_shop_enchere_liste WHERE Reference='".$MyRef."' ");
while($data = $Stat->fetch(PDO::FETCH_ASSOC)){

echo number_format($data["Enchere"] / $MNY_Taux, 0, ',', ' ')." ".$MNY_Franc;

}}
?>

and the numbers page ... 

<?php
if(isset($_GET['MyRef'])){
$MyRef = htmlspecialchars($_GET['MyRef']);

$Nombre = $pdo->query("SELECT COUNT(NIC_Handle) FROM tb_shop_enchere_liste WHERE Reference='".$MyRef."' ")->fetchColumn();

if($Nombre > 1) {$Nbr = $Nombre." enchères";} else {$Nbr = $Nombre." enchère";}

echo $Nbr;

}
?>

  both have two different tables.


What do you offer me?

Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:

I do not know PDO, but I assume you will get ONE max value back from the loop


If you have something like this


<?php
if(isset($_GET['MyRef'])){
  $MyRef = htmlspecialchars($_GET['MyRef']);
  $enchere = 0;

  $Stat = $pdo->query("SELECT MAX(Enchere) AS Enchere FROM tb_shop_enchere_liste WHERE Reference='".$MyRef."' ");
  while($data = $Stat->fetch(PDO::FETCH_ASSOC)){
    $enchere = number_format($data["Enchere"] / $MNY_Taux, 0, ',', ' ')." ".$MNY_Franc;
  }}
  $Nombre = $pdo->query("SELECT COUNT(NIC_Handle) FROM tb_shop_enchere_liste WHERE Reference='".$MyRef."' ")->fetchColumn();
  if($Nombre > 1) {$Nbr = $Nombre." enchères";} else {$Nbr = $Nombre." enchère";}

  echo '{ "enchere":"'.$enchere.'", "nbr":"'.$Nbr.'"}';

}
?>

then you can do something like


let tId;
const ref = "<?php echo $MyRef; ?>";
$(function() {
  tId = setInterval(function() {
    $.get("refresh.php?MyRef="+ref+"&rnd="+new Date().getTime(),function(data) { // rnd is to bust the cache
      $('#Enchere_'+ref).html(data.enchere);
      $('#Nombre_'+ref).html(data.nbr);
    });
  }, 1000);
});