Placeholder updated but webpage not refreshed #27

RobinMosedale · 2025-01-28T15:01:35Z

RobinMosedale
Jan 28, 2025

My apologies, I'm new to ESPAysncWebserver, and battling to see what I'm doing wrong.

Standard ESP32 Wroom development board. Arduino 2.3.2
](https://GitHub.com/mathieucarbou/ESPAsyncWebServer/releases/)

I was attracted as as part of another program I'd like a webserver which updates changing variables, similar to the sensor monitoring programs elsewhere.
This is a cut down version focussing on merely that.
There's a setInterval in the html, generating an interval of 1 second new XMLHttp sending a simple address.
There are simple server.on calls to capture the address, one without a processor callback, and one with a processor callback, with aysyncWebserverRequest, with sufficient serial.prints to track operation.
The issue: I can see the process traps working correctly and the %DATA% placeholder contents being sent. However, the webpage loads on initial request, but is not refreshing in following transmissions, except by a manual refresh. Am I missing something either in HTML or misinterpreting the asyncWebServer operation. I'm struggling having trawled examples for the simplest of example.

Here are a couple of screenshots. The simple counter is shown on the console log, and can be seen increasing, but the webpage is not being updating (same count) showing Test1 instead of test127.

Here is the ESP32 program:
`

// Load Wi-Fi library
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
// Create a web server object on port 80
AsyncWebServer server(80);

// Replace with your network credentials
const char* ssid = "BlockedOUT";
const char* password = "BlockedOUT";
int WebCounter =0;
String data = "text";
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { text-align:center; }
    .vert { margin-bottom: 10%; }
    .hori{ margin-bottom: 0%; }
  </style>
</head>
<div>
<body>
%DATA%
</div>
<p id = "displayItem"></p>
<script>
setInterval(function(){getData();},1000);

function getData(){
  var xttp = new XMLHttpRequest();
  xttp.onreadystatechange=function()  {
  if (this.readyState == 4 && this.status == 200) {
     console.log("Done");     
  };
}; 
  xttp.open("GET","/DATA/",true);
  xttp.send();
  };
</script>

</body>
</html>)rawliteral";

const char main_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { text-align:center; }
    .vert { margin-bottom: 10%; }
    .hori{ margin-bottom: 0%; }
  </style>
</head>
<div>
<body>


</div>
<a href="/DATA/">
      <button>Click me</button>
</a>


</body>
</html>)rawliteral";


String processor(const String& var){
  Serial.println("Processor");
  if (var == "DATA"){
    Serial.println("Hit");
    ++WebCounter;
    String data1= data+String(WebCounter);
    Serial.println(data1);
    return String(data1);
  }
  Serial.println("No trap");
  return String();
}

void setup() {
  Serial.begin(115200);  
  Serial.println("Webserver");
  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
  Serial.println("HTTP server started");
  // Define the root URL handler
  server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
    Serial.println("Main Page");
    request->send(200, "text/html", main_html);
    });
  server.on("/DATA/", HTTP_GET, [](AsyncWebServerRequest * request) {
    Serial.println("Server.on Data ");
    request->send_P(200, "text/html", index_html,processor);
    });

// Start the server
//server.begin();
//Serial.println("Web server started.");
server.begin();
Serial.println("Web server started.");
}

void loop(){}

`

Here we can see the DATA chatter both on the Web page and esp32 webserver

mathieucarbou · 2025-01-28T15:44:58Z

mathieucarbou
Jan 28, 2025
Maintainer

hello,
did you click on the xhr request to see the req headers / response headers and response body ?
can you post screenshots of the content of the 3 first ones that are visible here on the right ?

4 replies

RobinMosedale Jan 28, 2025
Author

mathieucarbou · 2025-01-28T16:26:21Z

mathieucarbou
Jan 28, 2025
Maintainer

@RobinMosedale everything works fine, like you have coded, we can see in the different content fetched the new body that is sent from the server and it is updated.

Now, this is up to you to make that work in html ;-)

Good luck!

1 reply

RobinMosedale Jan 28, 2025
Author

Thank you Mathieu. As perceived I'm not at all versed in HTML, a million miles away from my safety critical SW Engineering.

So the combination of:-
xttp.open("GET","/DATA/",true); xttp.send();

and:-
server.on("/DATA/", HTTP_GET, [](AsyncWebServerRequest * request) { Serial.println("Server.on Data "); request->send_P(200, "text/html", index_html,processor); });

doesn't actually send the HTML 'index_html' as specified in 'request->send_P(200, "text/html", index_html,processor);'

So do I need to do a subsequent xttp.open("GET","DATA",true) via new XMLHttpRequest which will merely get stuck in the same loop or another
server.on("/DATA/", HTTP_GET, [](AsyncWebServerRequest * request) { Serial.println("Server.on Data "); request->send(200, "text/html", index_html); });

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Placeholder updated but webpage not refreshed #27

{{title}}

Replies: 2 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Placeholder updated but webpage not refreshed #27

RobinMosedale Jan 28, 2025

Replies: 2 comments · 5 replies

mathieucarbou Jan 28, 2025 Maintainer

RobinMosedale Jan 28, 2025 Author

RobinMosedale Jan 28, 2025 Author

RobinMosedale Jan 28, 2025 Author

RobinMosedale Jan 28, 2025 Author

mathieucarbou Jan 28, 2025 Maintainer

RobinMosedale Jan 28, 2025 Author

RobinMosedale
Jan 28, 2025

Replies: 2 comments 5 replies

mathieucarbou
Jan 28, 2025
Maintainer

RobinMosedale Jan 28, 2025
Author

RobinMosedale Jan 28, 2025
Author

RobinMosedale Jan 28, 2025
Author

RobinMosedale Jan 28, 2025
Author

mathieucarbou
Jan 28, 2025
Maintainer

RobinMosedale Jan 28, 2025
Author