Webserver, ajax_inputs, and multiple pages

Projects Programming
1

I need to have two different web pages that both display different sets of Arduino values. One page will have buttons that turn on/off functionality, and the other page will show the values.

I've based this part of my code from here: Arduino SD Card Ajax Web Server Displaying Switch Status. Using this code I can generate all of the information on a single page.

Using a separate test program, I have been successful creating the two needed webpages by using this tutorial: Linking to Other Pages from the Arduino SD Card Web Server, but since it doesn't use ajax, my values don't show...

Below is my current code that I am using. What do I need to add to get the second page and have my values display?

   EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                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();
                        SetLEDs();
                        // send XML file containing input states
                        XML_response(client);
                    }
                    else {  // web page request
                        // send rest of HTTP header
                        client.println("Content-Type: text/html");
                        client.println("Connection: keep-alive");
                        client.println();
                        // send web page
                        webFile = SD.open("index.htm");        // open web page file
                        
                         if (webFile) {
                            while(webFile.available()) {
                                client.write(webFile.read()); // send web page to client
                            }
                            webFile.close();
                        }
                    }
                    // display received HTTP request on serial port
                    Serial.print(HTTP_req);
                    // 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)
2

You may be able to embed the data page in a frame in your main page.

3

You can use JavaScript to to parse the xml data and write into whatever html container.
I include the jquery cdn to make coding easier.
Something like

$( document ).ready(function() {
    $.get("ajax_inputs", function(data) {
          var output =  $(data).find("someTag").text();
          $("#somecontainerId").html(output);
     })
});
4

Thanks for the suggestions! After I took a 5 minute break, I looked an example and was able to find this way:

original code:

                    else {  // web page request
                        // send rest of HTTP header
                        client.println("Content-Type: text/html");
                        client.println("Connection: keep-alive");
                        client.println();
                        // send web page
                        webFile = SD.open("index.htm");        // open web page file
                        
                         if (webFile) {
                            while(webFile.available()) {
                                client.write(webFile.read()); // send web page to client
                            }
                            webFile.close();
                        }

New working code:

                    if (StrContains(HTTP_req, "GET / ") || StrContains(HTTP_req, "GET /index.htm"))
                    {
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-Type: text/html");
                        client.println("Connnection: close");
                        client.println();
                        webFile = SD.open("index.htm");        // open web page file
                    }
                    if (StrContains(HTTP_req, "GET /support.htm"))
                    {
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-Type: text/html");
                        client.println("Connnection: close");
                        client.println();
                        webFile = SD.open("support.htm");        // open web page file
                    }
5

If possible, can you share complete sketch that involve solution (New working code)? I failed to implement.

Thanks,

muldoon:
Thanks for the suggestions! After I took a 5 minute break, I looked an example and was able to find this way:

New working code:

                    if (StrContains(HTTP_req, "GET / ") || StrContains(HTTP_req, "GET /index.htm"))

{
                       client.println("HTTP/1.1 200 OK");
                       client.println("Content-Type: text/html");
                       client.println("Connnection: close");
                       client.println();
                       webFile = SD.open("index.htm");        // open web page file
                   }
                   if (StrContains(HTTP_req, "GET /support.htm"))
                   {
                       client.println("HTTP/1.1 200 OK");
                       client.println("Content-Type: text/html");
                       client.println("Connnection: close");
                       client.println();
                       webFile = SD.open("support.htm");        // open web page file
                   }