asked on

Get data from url after specific time repeatedly

The purpose of code below is to get data in table from url source.

Short description of actual situation:
On main page i have a button to redirect to *.php page in code snippet bellow.

With name="button1" I am getting data

and with id="newButtonID" I am inserting it in new row in tables.

I have intention to use select element to chose from time options (5min,15min, 60min) and fill new row with new data. (no any code about it for now, but i did add it because i presume that it will need it for timer interval)

My problem:
Before i continue with code-page logics construction I need a solution how to perform refreshing of data after specific time period.

Pleas instruct me how to reach this goal.

Thank you

<?php
if (isset($_POST['button1'])) 
{ 
$url="https://www.....";
$sfgc=file_get_contents($url);
$json=json_decode($sfgc,true);
$last= $json["last"];
//echo $json["last"];
$timestamp= $json["timestamp"];
//echo $json["timestamp"];
$date = new DateTime("@$timestamp");
$date2= $date->format('Y-m-d H:i:s') . "\n";
} 
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BTC</title>

<style type="text/css">
#timeBtcID{ 
    float: left;
    margin: 10px;
    /* background-color: #e6f2ff;
    border-style: solid;
    border-width: 1px;*/
}
#newBtcID{ 
    float: left;
    margin: 10px;
    /* background-color: #e6f2ff;
    border-style: solid;
    border-width: 1px;*/
}

#oldBtcID{ 
     float: left;
    margin: 10px;
    /* background-color: #e6f2ff;
    border-style: solid;
    border-width: 1px;*/
}
</style>

<script>
  var btcData=[];
  var refButton ;
  var tableBtc;
  var myBtc;
  var textBtc
  var r=1;


function btcIDf(){
var lastV=<?php echo json_encode( $last); ?>;
var timestampV=<?php echo json_encode( $date2); ?>;
    /* for(var i =tableBtc.rows.length - 1; i > 0; i--)
{
    tableBtc.deleteRow(i);
}*/
    //for(var i=1, len1 = 10; i < len1;++i){
       var row = timeBtc.insertRow(r);
       var cell1 = row.insertCell(0);
       cell1.innerHTML = timestampV;
       var row = newBtc.insertRow(r);
       var cell1 = row.insertCell(0);
       cell1.innerHTML = lastV;
       var row = oldBtc.insertRow(r);
       var cell1 = row.insertCell(0);
       cell1.innerHTML = lastV;
         ++r;
    //}
}
   window.onload = function(){
            timeBtc=document.getElementById("timeBtcID");
            newBtc=document.getElementById("newBtcID");
             oldBtc=document.getElementById("oldBtcID");
              newButton = document.getElementById("newButtonID");
             newButton.onclick = function() {
                btcIDf();
            }
        };
</script>
</head>
<body>
  <select id="selectTimeID" >
       <option value="5 min">5 min</option>
       <option value="15 min">15 min</option>
       <option value="60 min">60 min</option>
   </select></br></br>
<input type="button" id="newButtonID" value="New"/></br><br>
<form method="POST" action=''>
<input type="submit" name="button1"  value="Refresh">
</form>
<table id="timeBtcID">
    <tr>
         <td ><?php echo $date->format('Y-m-d H:i:s') . "\n"; ?></td>
    </tr>
</table>
<table id="newBtcID">
    <tr>
         <td ><?php echo $last; ?></td>
    </tr>
</table>
<table id="oldBtcID">
 <tr>
         <td><?php echo $last; ?></td>
    </tr>
</table>

</body>
</html>

Open in new window

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ivan Golubar

ASKER

Thank you for the answer. And i agree to use ajax. Next code is tested and it gives me jason back in console.
I will start now with adding of timer and acquiring of specific variables from json array. I think i will do it without any problems and close the question with yours answer.

function btcIDf(){
//var lastV=<?php echo json_encode( $last); ?>;
//var timestampV=<?php echo json_encode( $date2); ?>;
    $.ajax({
  method:"POST",
  url: 'https://www..................../',
  data:  {
    },
    datatype: "text",
    success: function(strdate){
   console.log(strdate);
 
     },
     error: function(error, txtStatus) {
      console.log(txtStatus);
      console.log('error');
    }
 });
    
    /* for(var i =tableBtc.rows.length - 1; i > 0; i--)
{
    tableBtc.deleteRow(i);
}*/
    //for(var i=1, len1 = 10; i < len1;++i){
       var row = timeBtc.insertRow(r);
       var cell1 = row.insertCell(0);
       cell1.innerHTML = timestampV;
       var row = newBtc.insertRow(r);
       var cell1 = row.insertCell(0);
       cell1.innerHTML = lastV;
       var row = oldBtc.insertRow(r);
       var cell1 = row.insertCell(0);
       cell1.innerHTML = lastV;
         ++r;
    //}
}

Open in new window

Ivan Golubar

ASKER

I need help with timer settings . Code below sets timer interval from select options.
I had troubles before with other elements, so i figured out to search fro element after windows loads.
I can find other elements and use them, but with selectTimeID something goes wrong. First line of code gives me error:
Uncaught ReferenceError: selectTime is not defined

I can't understand what is wrong. Pleas help me.

    var intervalTimer=selectTime.value;
     mytimer = setInterval(newIDf, intervalTimer);
      function getTimer(){intervalTimer= selectTime.value;}
      selectTime.onchang=getTimer;


   window.onload = function(){
           selectTime= document.getElementById("selectTimeID");
           timeBtc=document.getElementById("timeBtcID");
            newBtc=document.getElementById("newBtcID");
             oldBtc=document.getElementById("oldBtcID");
              newButton = document.getElementById("newButtonID");
             newButton.onclick = function() {
                newIDf();
            }
        };
</script>
</head>
<body>
<select id="selectTimeID" >
  <option value="0.2">15 sec</option>
  <option value="1">1 min</option>
  <option value="5">5 min</option>
  <option value="15">15 min</option>
  <option value="60">60 min</option>
</select></br></br>
<input type="button" id="newButtonID" value="New"/></br><br>

<table id="timeBtcID">
    <tr>
         <th >Date time</th>
    </tr>
</table>
<table id="newBtcID">
    <tr>
         <th >Actual</th>
    </tr>
</table>
<table id="oldBtcID">
 <tr>

Open in new window

Ivan Golubar

ASKER

I forgot to add this line: intervalTimer= intervalTimer*60000;
This is not the solution of the problem but just to not have timer to trigger in milliseconds.

selectTime= document.getElementById("selectTimeID");
    var intervalTimer=selectTime.value;
    intervalTimer= intervalTimer*60000;
     mytimer = setInterval(newIDf, intervalTimer);
      function getTimer(){intervalTimer= selectTime.value;}
      selectTime.onchang=getTimer;

Open in new window

Julian Hansen

You need to define selectTime in the global scope so that it is visible in the various event handlers

You set it in the onload - but that has its own scope that is not visible in the selectTimeout function - to get around this add

var selectTime

Open in new window

To the top of your JavaScript code.

Ivan Golubar

ASKER

Hi,
thank you.

if you check attached photo you will see variable declaration and also the error.

I can't understand what i am missing.

Uncaught TypeError: Cannot read property 'value' of undefined

123.jpg

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial