Repeat PHP function every 2 seconds

Question

So I have a code, where a number is retrieved from a text file and is displayed through HTML.

The thing is that it only retrieves the number when I refresh the page. If I change the number on other page, it doesn't change on the other page.

I've seen similar questions before, most of them said to use AJAX, but I don't understand much about AJAX and I only need it for this bit of code, it's not like I'm going to constantly use it. I would like to know if there is any other besides AJAX and if there is only AJAX, please present examples of code.

PHP code:

<?php
    $file = "num.txt"; //Path to your *.txt file
    $contents = file($file);
    $num = implode($contents);
?>

JavaScript code. Basically it gets the PHP value and outputs to the html.

document.getElementById("num").innerHTML = '<?php echo $num; ?>';

Keep in mind, I don't want to refresh the page. Just the variable.

EDIT: PHP code - Getting an error - Notice: Undefined index: keynum in C:\xampp\htdocs\num.php on line 3

Here is the code of the PHP

<?php
    $keynum = $_POST['keynum'];
    $post = "INSERT INTO post (keynum) VALUES ($keynum)";
    $fileLocation = getenv("DOCUMENT_ROOT") . "/num.txt";
    $file = fopen($fileLocation,"w");
    $content = $keynum;
    fwrite($file,$content);
    fclose($file);
    echo 'Response';
    die();
 ?>

Didn't you [already ask this](https://stackoverflow.com/questions/51061645/refresh-php-variable-inside-a-javascript-function)? — TiiJ7, Jun 27 '18 at 13:41
Possible duplicate of [Refresh PHP variable inside a javascript function](https://stackoverflow.com/questions/51061645/refresh-php-variable-inside-a-javascript-function) — IncredibleHat, Jun 27 '18 at 13:43
Wait... what? What does that edit have to do with your original question? Where did that code come from, where was there a mention of a form submit? Or updating a file? — IncredibleHat, Jun 27 '18 at 14:07

user7637745 · Answer 1 · 2018-06-27T13:52:49.847

2

You can achieve what you want using XMLHttpRequest, like this:

function updateData() {
  var xhttp = new XMLHttpRequest();
  
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById('num').innerHTML = this.responseText;
    }
  };      
  
  xhttp.open('GET', '/num.php', true);
  xhttp.send();
}

setInterval(updateData, 2000);

edited Jun 27 '18 at 13:52

answered Jun 27 '18 at 13:40

user7637745

965
2
14
27

Notice: Undefined index: keynum in C:\xampp\htdocs\num.php on line 3 Response – Miguel Casanova Jun 27 '18 at 13:47
I get that error. num.php is the php file that writes on the txt. Here is the code – Miguel Casanova Jun 27 '18 at 13:48
– Miguel Casanova Jun 27 '18 at 13:48
Please, update your question with your PHP code you just posted above with any errors you get, so we can help you more easily. Thanks! – user7637745 Jun 27 '18 at 13:51
1

Edited. Thanks for the help – Miguel Casanova Jun 27 '18 at 14:02
Do you have any idea what the error might be? The value isn't changing either – Miguel Casanova Jun 27 '18 at 14:23

score 1 · Answer 2 · answered Jun 27 '18 at 13:39

If you want to refresh the variable without refreshing the page, then you need to use an asynchronous request. It doesn't need to be AJAX, you can use the native XMLHttpRequest() function.

If you want more info: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests

score 1 · Answer 3 · answered Jun 27 '18 at 13:43

1

or with jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    setInterval(function(){
        $.ajax({url:"num.php", success:function(result){
            $("#num").html(result);
        }});
    }, 3000);
</script>

<textarea id="num"></textarea>

answered Jun 27 '18 at 13:43

MrSmile

1,217
2
12
20

It gives this error on num.php Notice: Undefined index: keynum in C:\xampp\htdocs\num.php on line 3 – Miguel Casanova Jun 27 '18 at 14:19
@MiguelCasanova but I didn’t give you code of num.php :) – MrSmile Jun 27 '18 at 14:21
@MiguelCasanova because there is no POST variable with index keynum. What info you want to send to script? – MrSmile Jun 27 '18 at 14:24

Hudson · Answer 4 · 2018-06-27T13:53:34.083

0

like this.

let url = ""; //whatever url your requesting.

setInterval(function(){
    var x = new XMLHttpRequest();
    x.open("GET" , url , true);
    x.onreadystatechange = function(){
        if(x.readyState == 4 && x.status == 200)
        {
             document.getElementById("num").innerHTML = x.responseText;
        }
    }
    x.send();
} , 2000);

-- UPDATE , added post --

setInterval(function(){
        var x = new XMLHttpRequest();
        x.open("POST" , url , true);
        x.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
        x.onreadystatechange = function(){
            if(x.readyState == 4 && x.status == 200)
            {
                 document.getElementById("num").innerHTML = x.responseText;
            }
        }
        x.send("postVar1=123");
    } , 2000);

edited Jun 27 '18 at 13:53

answered Jun 27 '18 at 13:39

Hudson

397
1
12

Notice: Undefined index: keynum in C:\xampp\htdocs\num.php on line 3 Response. I get that error. num.php is the php file that writes on the txt. Here is the code – Miguel Casanova Jun 27 '18 at 13:51
– Miguel Casanova Jun 27 '18 at 13:52
postVar1 = $_POST['postVar1'] in php , just swap out the values – Hudson Jun 27 '18 at 13:53
Didn't seem to work. Didn't give the error, but the value didn't change. – Miguel Casanova Jun 27 '18 at 14:03
var_dump your post variable – Hudson Jun 27 '18 at 14:55

score 0 · Accepted Answer · answered Jun 27 '18 at 14:02

0

get_nbr.php

 <?php
 $file = "num.txt"; //Path to your *.txt file
 $contents = file($file);
 $num = implode($contents);
 echo $num;
 ?>

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---trigger get_nbr() on page load on an infinite loop every two seconds -->
<body onload="setInterval(get_nbr, 2000)">
<script>
  function get_nbr() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
  document.getElementById("num").innerHTML = this.responseText;
  }
  };
  xhttp.open("GET", "get_nbr.php", true);
  xhttp.send();
  }
 </script> 
<p id="num"></p>

answered Jun 27 '18 at 14:02

AraByte

154
9

Value not changing. – Miguel Casanova Jun 27 '18 at 14:07
Keep in mind that the php code is in the same file as the javascript. – Miguel Casanova Jun 27 '18 at 14:15
Well, my answer is working Perfectly based on the event of having all three files : get_nbr.php, index.php and num.txt .... Do you want to perform anything with the number you get ? – AraByte Jun 27 '18 at 14:19
Got it working, but, when I dont change the value, it disappears, but it works fine if I constantly change it. – Miguel Casanova Jun 27 '18 at 14:38
FINALLY WORKING. Thanks so much. – Miguel Casanova Jun 27 '18 at 15:06
Glad you figured it out :) – AraByte Jun 27 '18 at 15:15
One thing now. I can only manage to get one working. I need 4 simultaneously. I tried separating them from function and in different scripts and it didn't work. All of them work but if it's just one at a time. If I add another function, it works alone but if there's two it doesn't work. – Miguel Casanova Jun 27 '18 at 15:17
It's the onload that is screwing things up. How do I get multiple ones there? – Miguel Casanova Jun 27 '18 at 15:19
you can get rid of that onload, and put setInterval(get_nbr, 2000); in the end of the javascript code – AraByte Jun 27 '18 at 15:23
Do you have 4 txt files and want to display/use them ? – AraByte Jun 27 '18 at 15:24

Repeat PHP function every 2 seconds

5 Answers5