[GH-ISSUE #1738] How to refresh (repaint) custom param element on setValue() #1476

New issue

Open

opened 2026-02-28 01:30:13 +03:00 by kerem · 2 comments

kerem commented

2026-02-28 01:30:13 +03:00

Owner

Originally created by @jpeterse on GitHub (May 15, 2024).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1738

I'm working on an project, where I would like to give users feedback when entering custom parameters in the config panel.
I have it sending value updates to a param element using setValue(). But it doesn't look like the element is refreshed on the page until the entire page is refreshed. E.g. like in issue 1464 about logging.
I would like for users not to loose their data input, in order to refresh that one field that the code is updating.

Is there a way, that the field can be redrawn/refreshed when setValue() is called?

(BTW, I'm aware setValue() is server side, and I need to update the field client side. Question is, how I can do that.)

Generic Esp8266
Core Version: 2.0.17
Sample code;

#include <WiFiManager.h> // https://github.com/tzapu/WiFiManager

WiFiManager wm;

int LRTReading = 0;

class IntParameter : public WiFiManagerParameter {
public:
    IntParameter(const char *id, const char *placeholder, long value, const uint8_t length = 10) : WiFiManagerParameter("") {
      init(id, placeholder, String(value).c_str(), length, "", WFM_LABEL_BEFORE);
    }

    long getValue() {
      return String(WiFiManagerParameter::getValue()).toInt();
    }

    void setValue( int value ) {
      WiFiManagerParameter::setValue( String(value).c_str(), 10 );
      
    }
};

IntParameter param_int( "int", "param_int",  LRTReading );

void setup() {
    WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP    
    // put your setup code here, to run once:
    Serial.begin(115200);
    
    //reset settings - wipe credentials for testing
    //wm.resetSettings();
    wm.addParameter( &param_int );
    wm.setConfigPortalBlocking(false);

    //automatically connect using saved credentials if they exist
    //If connection fails it starts an access point with the specified name
    if(wm.autoConnect("AutoConnectAP")){
        Serial.println("connected...yeey :)");
    }
    else {
        Serial.println("Config portal running");
    }
}


uint32_t t;
uint16_t i;
uint16_t delay_val = 1000;

void loop() {
  t = millis();
  i = ( t / delay_val );
  // put your main code here, to run repeatedly:
  Serial.println( i );
  param_int.setValue( i );
  while ( millis() < t + delay_val )
    wm.process();
}

Originally created by @jpeterse on GitHub (May 15, 2024). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1738 I'm working on an project, where I would like to give users feedback when entering custom parameters in the config panel. I have it sending value updates to a param element using setValue(). But it doesn't look like the element is refreshed on the page until the entire page is refreshed. E.g. like in issue 1464 about logging. I would like for users not to loose their data input, in order to refresh that one field that the code is updating. Is there a way, that the field can be redrawn/refreshed when setValue() is called? (BTW, I'm aware setValue() is server side, and I need to update the field client side. Question is, how I can do that.) Generic Esp8266 Core Version: 2.0.17 Sample code; ``` #include <WiFiManager.h> // https://github.com/tzapu/WiFiManager WiFiManager wm; int LRTReading = 0; class IntParameter : public WiFiManagerParameter { public: IntParameter(const char *id, const char *placeholder, long value, const uint8_t length = 10) : WiFiManagerParameter("") { init(id, placeholder, String(value).c_str(), length, "", WFM_LABEL_BEFORE); } long getValue() { return String(WiFiManagerParameter::getValue()).toInt(); } void setValue( int value ) { WiFiManagerParameter::setValue( String(value).c_str(), 10 ); } }; IntParameter param_int( "int", "param_int", LRTReading ); void setup() { WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP // put your setup code here, to run once: Serial.begin(115200); //reset settings - wipe credentials for testing //wm.resetSettings(); wm.addParameter( &param_int ); wm.setConfigPortalBlocking(false); //automatically connect using saved credentials if they exist //If connection fails it starts an access point with the specified name if(wm.autoConnect("AutoConnectAP")){ Serial.println("connected...yeey :)"); } else { Serial.println("Config portal running"); } } uint32_t t; uint16_t i; uint16_t delay_val = 1000; void loop() { t = millis(); i = ( t / delay_val ); // put your main code here, to run repeatedly: Serial.println( i ); param_int.setValue( i ); while ( millis() < t + delay_val ) wm.process(); } ```

kerem commented

2026-02-28 01:30:13 +03:00

Author

Owner

@tablatronix commented on GitHub (May 15, 2024):

Are you wanting to do it via ajax? Not sure I understand, you will need to add some xhr js to the page

@tablatronix commented on GitHub (May 15, 2024): Are you wanting to do it via ajax? Not sure I understand, you will need to add some xhr js to the page

kerem commented

2026-02-28 01:30:14 +03:00

Author

Owner

@jpeterse commented on GitHub (May 16, 2024):

I assume it would have to be done with ajax. But that's only my assumption.

I have not been able to find examples of how I can use that abilities provided within WiFiManager, to update a field on the configuration page dynamically. Users will have to click the refresh button to reload the configuration page to see the updated value.

WiFiManager starts it own web server, when the configuration page is being displayed. I know I can inject java script in the header, and on custom parameters as well. But I don't know if I have access to inject the js code needed to listen for XHR requests.

I was looking to use WiFiManager to do this, because it's a one time configuration, just like setting up the network is.
But Is it possible, or is a fools errand to attempt to use custom parameters for this? ;-)

@jpeterse commented on GitHub (May 16, 2024): I assume it would have to be done with ajax. But that's only my assumption. I have not been able to find examples of how I can use that abilities provided within WiFiManager, to update a field on the configuration page dynamically. Users will have to click the refresh button to reload the configuration page to see the updated value. WiFiManager starts it own web server, when the configuration page is being displayed. I know I can inject java script in the header, and on custom parameters as well. But I don't know if I have access to inject the js code needed to listen for XHR requests. I was looking to use WiFiManager to do this, because it's a one time configuration, just like setting up the network is. But Is it possible, or is a fools errand to attempt to use custom parameters for this? ;-)