Update data on web page without refreshing ?

Hello, Everyone!

I'm using Arduino with Ethernet shield for building web-based IoT application, in which two analog values are compared by clicking "submit" button from the web page and based on that LED will turn on/off and that LED status and data is successfully printed on the web page but for new updated value I've to refresh page each and every time and that will clear all previous data. So, I just want to update new analog data on a web page without a refreshing entire page.

Please help me to fix it.

Thanks in advance !!:slight_smile:

Here is my invisible fix to your invisible code.

Yes it's possible but this is really a JavaScript problem to program the webpage to fetch data automatically.

^ ditto! (post some code)

What are you using currently to get these values/data in (on) the page?

Where does this data come from? Is it stored in a database?

Or queried/added to the page directly from the Arduino once the page loads?

If you need to grab data or do 'something' behind the scenes, and update content on a page without a refresh/reload.. then you will probably need to use some AJAX & PHP scripts...

Is the Ethernet shield hosting/serving up the web page? Or is just used to connect and pass data to some script/database?

and the 'web page' is just hosted elsewhere? grabbing this date from (wherever) to be displayed on the page?

void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                // Serial.println("Client Available");
                char c = client.read(); // read 1 byte (character) from client
                // limit the size of the stored received HTTP request
                // buffer first part of HTTP request in HTTP_req array (string)
                // leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)
                if (req_index < (REQ_BUF_SZ - 1)) {
                    HTTP_req[req_index] = c;          // save HTTP request character
                    req_index++;
                }
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    // remainder of header follows below, depending on if
                    // web page or XML page is requested
                    // Ajax request - send XML file
                    if (StrContains(HTTP_req, "ajax_inputs")) {
                        // send rest of HTTP header
                        client.println("Content-Type: text/xml");
                        client.println("Connection: keep-alive");
                        client.println();

                        // print the received text to the Serial Monitor window
                        // if received with the incoming HTTP GET string
                        if (GetText(txt_buf, TXT_BUF_SZ)) {
                          Serial.println("\r\nReceived Text:");
                          
                          Serial.println(txt_buf);
                          String svstring;
                          svstring = String(svstring + txt_buf);

                          sv = svstring.toFloat();

                          int analogChannel = 0;
                          float sensorReading = analogRead(analogChannel);
                          pv = 2*((sensorReading*5)/1023);
                          pv = pow(10,1.5*(pv) - 12);
                          
                          if(sv>=pv)
                          {
                            digitalWrite(4, HIGH);
                            Serial.println("Writing HIGH");
                            client.println("HIGH");
                            //return true;
                          }
                          else if(sv<pv)
                          {
                            digitalWrite(4, LOW);
                            Serial.println("Writing LOW");
                            client.println("LOW");
                            //return false;
                          }

                          client.print("Analog input ");
                          client.print(analogChannel);
                          client.print(" is ");
                          client.print(pv,7);
                          //client.println(sci(pv,4));
                          client.print("\r\n");
                          
                        }
                    }
                    else {  // web page request
                        // send rest of HTTP header
                        client.println("Content-Type: text/html");
                        client.println("Connection: keep-alive");
                        client.println();

                        client.println("<!DOCTYPE html>");
                        client.println("<html lang='en'>");
                        client.println("<head>");
                        client.println("<meta charset='utf-8'>");
                        client.println("<title>TTSD Control System</title>");
                         client.println("<fieldset>");
                        client.println("<legend>Thermo Vacuum Test System Division - SAC</legend>");
                        client.println("<script>");

                        client.println("strText = '';");
        
                        client.println("function SendText(){");
                        client.println("nocache = '&nocache=' + Math.random() * 1000000;");
                        client.println("var request = new XMLHttpRequest();");
                        client.println("request.onreadystatechange = function() { ");
                        client.println("if (request.readyState == XMLHttpRequest.DONE) {");
                        client.println("var paragraph = document.getElementById('response');");
                        client.println("var text = document.createTextNode(request.response);");
                        client.println("paragraph.appendChild(text);}}");
                        client.println("strText = '&txt=' + document.getElementById('txt_form').form_text.value + '&end=end';");
                      //  document.getElementById('txt_status').form_text.value='on'
                        client.println("request.open('GET', 'ajax_inputs' + strText + nocache, true);");
                        client.println("request.send(null);}");
                        client.println("</script>");
                        client.println("</head>");
                        client.println("<body onload='GetArduinoIO()'>");
                        client.println("<form id='txt_form' name='frmText'>");
                        client.println("Enter Value: <input name='form_text' />");
                        client.println("<input type='button' value='Submit' onclick='SendText()' />");
                        client.println("</form>");
                        client.println("<p id='response'></p>");
                        client.println("</body>");
                         client.println("</fieldset>");
                        client.println("</html>");
                        Serial.println("page loaded");
                    }
                    // reset buffer index and all buffer elements to 0
                    req_index = 0;
                    StrClear(HTTP_req, REQ_BUF_SZ);
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
    } // end if (client)
  }