Refreshing a textbox every couple of seconds with mysql query?

Question

I have this textbox in my code that everytime this page is loaded/refreshed, its content is filled with a query result. But since refreshing manually is not an option in my case, how can I do this automatically (I only want to refresh the textbox)? I've read about using AJAX, and I've been reading about it, but to be honest I don't quite get how to make it work, could someone explain me and dumb it down? Isn't there any easier way to refresh the textbox with the query content?

EDIT: Okay, I think I understood the basics of AJAX, the function is now refreshing the textbox every second, but there's a small problem. It messed up my table big time. I've modified the HTML code in hope someone can tell me what I did wrong. I'm thinking I shouldn't be including a div inside a table? Here's how my table looked like and how it looks like after this little update

<?php
include '../Login/db_login.php';
session_start();
$sql = "SELECT Contador FROM senhas2 WHERE ID=1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$nome = $row['Contador']
?>

<!doctype html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Página de administração - A</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            setInterval(function(){
            $('#refreshtb').load('bt1admin.php');
            }, 1000) 
        </script>
 </head>

 <body>
  <form action="" id="atender" method="POST">
    <table border="1">
    <tr>
        <td>Clientes em espera:</td>
        <td><div id="refreshtb"><input id="refreshtb" type="text" value="<?php echo  "$nome";?>"readonly></div></td>
    </tr>
    <tr>
        <td>Selecionar posto de atendimento:</td>
        <td><select name="posto"><option value="n1" selected>1</option><option value="n2">2</option><option value="n3">3</option><option value="n4">4</option><option value="n5">5</option><option value="n6">6</option></select>
    </tr>
    <tr>
        <td colspan="2"><input type="submit" form="atender" name="atender" value="Atender Cliente Seguinte"></td>
    </tr>
    </table>
  </form>
 </body>
</html>

You're right, use AJAX and run it every X seconds with `setInterval()` — Qirel, May 05 '17 at 23:24

score 1 · Answer 1 · edited May 23 '17 at 12:26

You cannot change the content of a page using PHP. You'll need to use a front-end language, such as Javascript. Javascript is able to change your page's content, even after it is loaded. In order to update your page's content every X seconds, you'll want to use Javascript's setInterval() function to run a function every X seconds. This function would use AJAX to send a request to your website and gather some more data, and then update your textbox to contain this new data. You might find this Stackoverflow question helpful: How does AJAX work?

EDIT: To clear up some confusion in our comment discussion and in response to your edits, I've modified your code a little bit. Try this:

<!doctype html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Página de administração - A</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            setInterval(function(){
                $.ajax('bt1admin.php').done(function(data) {
                    $("#refreshtb").val(data);
                })
            }, 1000);
        </script>
 </head>

 <body>
  <form action="" id="atender" method="POST">
    <table border="1">
    <tr>
        <td>Clientes em espera:</td>
        <td><div><input id="refreshtb" type="text" value="<?php echo  "$nome";?>"readonly></div></td>
    </tr>
    <tr>
        <td>Selecionar posto de atendimento:</td>
        <td><select name="posto"><option value="n1" selected>1</option><option value="n2">2</option><option value="n3">3</option><option value="n4">4</option><option value="n5">5</option><option value="n6">6</option></select>
    </tr>
    <tr>
        <td colspan="2"><input type="submit" form="atender" name="atender" value="Atender Cliente Seguinte"></td>
    </tr>
    </table>
  </form>
 </body>
</html>

What I did:

First of all, you had duplicate #refreshtb elements, so I removed one of them.
You were also using the .load() method in JQuery. This does not update the value of an HTML input. Instead, it just replaces the child HTML, which is not what you want. I updated your script to now update the value of the #refreshtb input element.

Tested and it seems to work fine for me. If you're still getting that weird table issue after this or for some reason the field isn't being updated properly, I suspect it's an issue with your bt1admin.php page. Make sure that page isn't outputting the entire table, and instead just the value you want to go into the text box.

I think I quite get how AJAX works now, although still a bit confusing to me. The textbox is refreshing itself now, but my table got messed up somehow. I've added the details to the original post — Gorgon Brum, May 06 '17 at 01:12
Basically it creates a copy of my already existing table inside the where the textbox is. I've added all the details to the original post, including my changes to the html. I'm assuming the problem is due to the placement of the div, but I'm not really sure. — Gorgon Brum, May 06 '17 at 10:58
It's hard to determine what is going wrong. If you go to `bt1admin.php`, is the HTML an entire table, or just the value you want in the box? Also worth noting, ID `#refreshtb` is used in 2 spots in your HTML, which is invalid HTML. I don't think that's causing your problem, though. — robere2, May 06 '17 at 13:33
Added edits to my original post with some more information, and hopefully they fix your issue. — robere2, May 06 '17 at 13:55
Almost. Now I don't get random XAMPP errors and it doesn't crash after a while, though it outputs the value I want the the HTML code. The query is only outputing 1 field from the database (https://pastebin.com/nyPXBUKA). And this is how it looks like http://i.imgur.com/rLZHWEZ.png Ignore the query echo, that's just for me to check if it's outputting what I want. Could it be because the PHP and HTML are inside the same file (bt1admin.php)? — Gorgon Brum, May 06 '17 at 14:50
It comes down to what your `bt1admin.php` page is outputting. Is it the entire table? Just the value you want in the textbox? More information is needed for me to be able to help you. — robere2, May 06 '17 at 16:10
Just the value I want. Once I get home, I'll try to mess around with css in order to decrease the textbox width so the rest stays hidden. Cheapest and most incorrect solution probably, but this is already getting on my nerves — Gorgon Brum, May 06 '17 at 16:17
Is the content-type set to `text/plain`, or something else similar? You could try that, if not. It definitely looks like more than just a number is being output, though. — robere2, May 06 '17 at 17:31

Refreshing a textbox every couple of seconds with mysql query?

1 Answers1