Refreshing Web Site Without Resending Data?

I need to be able to refresh a web site where the arduino is the server without resending the previously submitted data.

I get this message when I refresh

To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier.

and then all the data gets resent, which is bad. Any ideas?

RobDrizzle:
I need to be able to refresh a web site where the arduino is the server without resending the previously submitted data.

I get this message when I refresh

To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier.

and then all the data gets resent, which is bad. Any ideas?

Yes. Don't refresh.

edit: How do you expect the server to know you want to refresh unless you send a request? I would use a hidden input field like "transaction id" in the form that is incremented or modified by a JavaScript onSubmit routine on the form. If the "transaction id" value is not incremented or modified, it is old data that was sent by a refresh or back button, not the submit button on the form.

I need to be able to refresh a web site where the arduino is the server without resending the previously submitted data

You might put a nondata link in the arduino served page that just returns the initial arduino served page.

I need to be able to refresh a web site where the arduino is the server without resending the previously submitted data.

What, exactly, do you want to refresh, if not the previously sent data?

and then all the data gets resent, which is bad.

Why is that bad?

I'm opening a garage door via the internet. I have the code momentarily snapping a relay which will act as if you were pushing the garage door button. I have a limit switch attached to get the state of the door (open or closed). I would like to be able to refresh the page and see if the door state has changed (say if someone manually opened the door or if the door got stuck and then automatically reopened). When I do refresh the page, the door operation button press gets resent and the door button will be pressed again, which is unwanted.

You can make a main relay control page and embed a status page in a frame in the main control page.

You want to look into AJAX 8)

AJAX normally works with PHP as a server side language, but people have used it with Arduino. (I dream of the day we can run PHP on something like this!)
http://notebook.kulchenko.com/embedded/streaming-real-time-data-from-arduino-using-ajax-and-persistent-connections

This should allow you to watch the "status" of the door in near real time and press the open button as needed.

You want to look into AJAX

You really don't need ajax. Standard html will do.

zoomkat:

You want to look into AJAX

You really don't need ajax. Standard html will do.

How?
You can not change the data displayed on a client browser without reloading something... AJAX saves you from reloading the entire page and will only reload elements as needed. This is a lot less overhead that a full page refresh.

Simple iframe html code. As to refreshing, the http status: 204 and/or an embeded iframe as a bit bucket can be used.

<HTML>
<HEAD>
<TITLE>Zoomkat's frame test</TITLE>
</HEAD>
Zoomkat's Arduino frame meta refresh test 7/23/12




Arduino analog input data frame:


|<a href='http://192.168.1.102:84' target='DataBox' title=''Voltage on analog input''>DATA</a>|
<a href='http://web.comporium.net/~shb/arduino.txt' target='DataBox' title=''client test page''>STOP</a>|


<iframe src='http://192.168.1.102:84:84' width='350' height='250' name='DataBox'>
</iframe>


</HTML>

zoomkat:
Simple iframe html code. As to refreshing, the http status: 204 and/or an embeded iframe as a bit bucket can be used.

<HTML>
Zoomkat's frame test Zoomkat's Arduino frame meta refresh test 7/23/12

Arduino analog input data frame:

|<a href='http://192.168.1.102:84' target='DataBox' title=''Voltage on analog input''>DATA|
<a href='http://web.comporium.net/~shb/arduino.txt' target='DataBox' title=''client test page''>STOP|

> ```

Yes this will work but his question asked how to do it without reloading the page, technically an iframe is a page and you are reloading the frame (page) page in your example. The down side is the frame will still look like it is refreshing depending how much data you are pulling off http://192.168.1.102:84:84.

AJAX does it without any page refresh.

AJAX does it without any page refresh.

Do you have any arduino ajax code that does not rely on downloading .js files from external servers? I've used java applets to stream web cam pix in the past, but nothing to put on the arduino. Below is some server test code I've used on the arduino.

//zoomkat 12-8-11
//simple button GET with iframe code
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html (or use ')
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields

#include <SPI.h>
#include <Ethernet.h>

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port

String readString; 

//////////////////////

void setup(){

  pinMode(5, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();

  //enable serial data print 
  Serial.begin(9600); 
  Serial.println("server LED test 1.0"); // so I can keep track of what is loaded
}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string 
          readString += c; 
          //Serial.print(c);
        } 

        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //print to serial monitor for debuging 

          //now output HTML data header
             if(readString.indexOf('?') >=0) { //don't send new page
               client.println("HTTP/1.1 204 Zoomkat");
               client.println();
               client.println();  
             }
             else {
          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");
          client.println();

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<TITLE>Arduino GET test page</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");

          client.println("<H1>Zoomkat's simple Arduino button</H1>");
          
          client.println("<a href=\"/?on\" target=\"inlineframe\">ON</a>"); 
          client.println("<a href=\"/?off\" target=\"inlineframe\">OFF</a>"); 

          //client.println("<IFRAME name=inlineframe src=\"res://D:/WINDOWS/dnserror.htm\" width=1 height=1\">");
          client.println("<IFRAME name=inlineframe style=\"display:none\" >");          
          client.println("</IFRAME>");

          client.println("</BODY>");
          client.println("</HTML>");
             }

          delay(1);
          //stopping client
          client.stop();

          ///////////////////// control arduino pin
          if(readString.indexOf("on") >0)//checks for on
          {
            digitalWrite(5, HIGH);    // set pin 4 high
            Serial.println("Led On");
          }
          if(readString.indexOf("off") >0)//checks for off
          {
            digitalWrite(5, LOW);    // set pin 4 low
            Serial.println("Led Off");
          }
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

I have not played with AJAX and Arduino yet myself. All my experience is with AJAX is in a full featured server running Apache web server. This is still an option for Arduino since it can "talk" to the server, and then allow the server to talk to the client.

As far as not needing to download files from other locations; if you get the Ethernet shield with the SC card you can store anything you need on the card.
As seen in this example:

Real world difference:
For the original purpose of this post (controlling garage door) any refresh option will work just fine. There are not going to be thousands of users trying to control your garage door at once and the amount of data being sent is small. The iframe offers the advantage of not having your static elements from blinking (refreshing) but limited page lay out of dynamic data elements big time. AJAX will take some time to implement, but offers advantages of controlling many dynamic elements all over a page in real time.

Good Luck!

I have not played with AJAX and Arduino yet myself.

That was what I suspected. Your video appears to show meta refresh page with a control link being supplied to the phone.

For all those looking to see this closed out, I simply used a Meta-refresh command set for 15 seconds. Works great and does not resend button presses.

Thanks for the help guys.

why not to use ExtJs, I manage to put it working with ethernet shield : :cold_sweat:

RobDrizzle:
For all those looking to see this closed out, I simply used a Meta-refresh command set for 15 seconds. Works great and does not resend button presses.

Thanks for the help guys.

How do I use the Meta-refresh command in code? Thanks

RobDrizzle:
For all those looking to see this closed out, I simply used a Meta-refresh command set for 15 seconds. Works great and does not resend button presses.

Thanks for the help guys.

How do I use the Meta-refresh command in code? Thanks

RobDrizzle:
For all those looking to see this closed out, I simply used a Meta-refresh command set for 15 seconds. Works great and does not resend button presses.

Thanks for the help guys.

How do I use the Meta-refresh command in code? Thanks

How do I use the Meta-refresh command in code? Thanks

/ zoomkat meta refresh server test code
// arduino IDE 1.0
// for W5100 ethernet shield
// the IP address will be dependent on your local network/router
// port 80 is default for HTTP, but can be changed as needed
// use IP address like http://192.168.1.102:84 in your brouser
// or http://zoomkat.no-ip.com:84 with dynamic IP service
// use the \ slash to escape the " in the html
// meta refresh set for 2 seconds

#include <SPI.h>
#include <Ethernet.h>

int x=0; //set refresh counter to 0
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,102); // ip in lan
EthernetServer server(84); //server is using port 84

void setup()
{
  // start the server
  Ethernet.begin(mac, ip);
  server.begin();
}

void loop()
{
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
     while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // see if HTTP request has ended with blank line
        if (c == '\n') {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          
          //meta-refresh page every 2 seconds
          x=x+1; //page upload counter
          client.println("<HTML>");
          client.print("<HEAD>");
          client.print("<meta http-equiv='refresh' content='2'>"); //url='http://192.168.1.102:84/'
          client.print("<TITLE />Zoomkat's meta-refresh test</title>");
          client.print("</head>");
          client.println("<BODY>");
          client.print("Zoomkat's meta-refresh test IDE 1.0");
          client.println("
");
                    
          client.print("page refresh number ");
          client.println(x); //current refresh count
          client.println("
");
          client.println("
");
          
          client.print("Zoomkat's arduino analog input values:");
          client.println("
");
          client.println("
");
          
          // output the value of each analog input pin
          for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
            client.print("analog input ");
            client.print(analogChannel);
            client.print(" is ");
            client.print(analogRead(analogChannel));
            client.println("
");
            }
           break;
          client.println("</BODY>");
          client.println("</HTML>");
         }
        }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
  }
}