Question posted in
You can find the official documentation here.

Updating a variable using Ajax – Jquery ajax

I’m not familiar with Ajax so I’m learning fast. I’d appreciate some help on displaying a variable

rdm = urandom.randint(10,100) //comes from a loop in micropython.

Here’s what I’ve so far. The part of turning ON/OFF a LED is working. I just cannot get the variable to update every 2 seconds.

TIA

<html>
  <head>
    <title>ESP32-OLED
    </title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js" type="text/javascript">
    </script>
  </head>
  <body>
    <div>
      <h4>The ESP32 Update web page without refresh
      </h4>
      <br>
      <p>LED State: 
        <strong>%s
        </strong>
      </p>
      <p>RDM number: 
        <span id="rdm">0
        </span>
      </p>
      <p>
        <button onclick="window.location.href = '/?led=on'">ON
        </button>
      </p>
      <p>
        <button onclick="window.location.href = '/?led=off'">OFF
        </button>
      </p>
      <br>
      <a href="http://www.google.com">www.google.com
      </a>
    </div>
    <script>
        var txt = "jQuery Works";
        var _rdm = rdm;
      //wait for the page to fully load
      //$(document).ready(function(){
      //  var txt = "jQuery Works";
      //  alert(txt)
      //}
      //);
      
      setInterval(function() {
        // Call a function repetatively with 2 Second interval
        getData();
      }, 2000);
      //2000mSeconds update rate
      
      function getData() {
        var xhttp = new XMLHttpRequest();
        var rdm = document.getElementById("rdm").value;
        xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            //returns 4 when the server finishes streaming the response
            
            document.getElementById("rdm").innerHTML = _rdm;
            //return object whose id property matches the specified string
          }
        };
        xhttp.send();
      }
    </script>
  </body>
</html>```
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    <!DOCTYPE html>
<html>
  <head>
    <title>ESP32-OLED
    </title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js" type="text/javascript">
    </script>
  </head>
  <body>
    <div>
      <h4>The ESP32 Update web page without refresh
      </h4>
      <br>
      <p>LED State: 
        <strong>OFF
        </strong>
      </p>
      <p>RDM number: 
        <span id="rdm">0
        </span>
      </p>
      <p>
        <button onclick="window.location.href = '/?led=on'">ON
        </button>
      </p>
      <p>
        <button onclick="window.location.href = '/?led=off'">OFF
        </button>
      </p>
      <br>
      <a href="http://www.google.com">www.google.com
      </a>
    </div>
    <script>
        var asyncGetData = new Promise(getData)

        asyncGetData.then(() => {
            setTimeout(asyncGetData, 2000)
            })

        function getData(resolve) {
            var xhttp = new XMLHttpRequest();
            var rdm = document.getElementById("rdm").value;
            
            alert("Test 123!!");
            
            xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //returns 4 when the server finishes streaming the response
      
                document.getElementById("rdm").innerHTML = rdm;
                resolve();
                //return object whose id property matches the specified string
                }
            };
            xhttp.send();
        }
    
    </script>
  </body>
</html>

  2. 0

    You should resolve xhr before calling interval/timeout, also you need to call method open

    var asyncGetData = new Promise(getData)

function run () {
  asyncGetData.then(d => {
    console.log(d)
    setTimeout(run, 2000)
  })
}

run()

function getData(resolve) {
  var xhttp = new XMLHttpRequest();
  // var rdm = document.getElementById("rdm").value;
  xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
      //returns 4 when the server finishes streaming the response
      
      document.getElementById("rdm").innerHTML = JSON.stringify(JSON.parse(this.responseText), false, 2);
      resolve(this.responseText);
      //return object whose id property matches the specified string
    }
  };
  // you need to call open with the method an the api url
  xhttp.open('GET', 'https://api.github.com/users/octocat')
  xhttp.send();
}
    <pre id="rdm"></pre>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search