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:

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)
  }

Can you post the 'view source' version of the webpage as viewed in the browser? Its a bit hard to follow the HTML and javascript when its all chunked up by print statements.

Here I've attached a screenshot of my webpage...I just want to continuously update that analog float value without a refreshing entire page.

Not quite what I was looking for. Please post (as text, within the code tags) the source code as received by your web browser. In Chrome this is done by right-clicking the page and choosing ''View Page Source", your browser may have a slightly different option.

You look to be on the right track with the AJAX patterns but its hard to actually follow your javascript when its split up by print statements.

Access the web page that is running on your device, from a PC browser. Then press F12 and copy the all the HTML that is published there. That will show us what lies within all of the printf's within the code.

One way that could work is to provide JavaScript on your page, that is loaded and run in the host browser, and it polls an API for data. Once the JSON response is changed it updates the ID on the web page:
document.getElementById("IDOfText").value = "New Data";

This could also be done via a LongPoll, so the response only comes back to the host when something has changed.