Javascript issue, perhaps?

I have an SD/Ethernet card shield sat on top of my arduino.
Using the basic scripts out there I am able to produce a web server using the files from the SD card.
The index.htm page loads when I browse to the device's IP address no problem, very easy.

I am hosting these files on the SD card.

index.htm
temp.csv
humid.csv
light.csv
dygraph-combined.js

However:

I have the same files uploaded to my (www) web address.
It looks like this: www.f3eak.co.uk/sensors
As you can see, it displays the graph, obtaining the information from the CSV files using javascript.

But when I view the same files on my arduino server that has the same files with the same structure i get this:

Basically, the Java isn't working.

I have tested it using a shorter *.js filename such as "dygraph.js" for example.
Again, it works on my website, but not on the arduino webserver.

Is there something that I am missing?

You'll have to post the code. Can't even attempt a guess without it.

The code for what, the index.htm file?

<html>
<head>
<script type="text/javascript"
  src="dygraph.js"></script>
</head>
<style type="text/css">
div.example {border: none; padding: 0.6em; margin: 1em 2em}

/* First example */
div.items p:not(:target) {display: none}
div.items p:target {display: block; outline: none}
p.menu {margin: 0; padding: 0.4em; background: silver; color: black}
p.menu a {color: black; border: thin outset silver; padding: 0.1em 0.3em}
div.items p {height: 6em; overflow: auto; text-align: center; margin: 0}
#item1 {color: red}
#item2 {color: green}
#item3 {color: blue}

/* Tabbed example */
div.tabs {
  min-height: 25em;		/* No height: can grow if :target doesn't work */
  position: relative;		/* Establish a containing block */
  line-height: 1;		/* Easier to calculate with */
  z-index: 0}			/* So that we can put other things behind */
div.tabs > div {
  display: inline}		/* We want the buttons all on one line */
div.tabs > div > a {
  color: black;			/* Looks more like a button than a link */
  background: #CCC;		/* Active tabs are light gray */
  padding: 0.2em;		/* Some breathing space */
  border: 0.1em outset #BBB;	/* Make it look like a button */
  border-bottom: 0.1em solid #CCC} /* Visually connect tab and tab body */
div.tabs > div:not(:target) > a {
  border-bottom: none;		/* Make the bottom border disappear */
  background: #999}		/* Inactive tabs are dark gray */
div.tabs > div:target > a,	/* Apply to the targeted item or... */
:target #info > a {		/* ... to the default item */
  border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */
  background: #CCC}		/* Active tab is light gray */
div.tabs > div > div {
  background: #FFF;		/* Light gray */
  z-index: -2;			/* Behind, because the borders overlap */
  left: 0; top: 1.3em;		/* The top needs some calculation... */
  bottom: 0; right: 0;		/* Other sides flush with containing block */
  overflow: auto;		/* Scroll bar if needed */
  padding: 0.3em;		/* Looks better */
  border: 0.0em outset #BBB}	/* 3D look */
div.tabs > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */
  position: absolute }		/* All these DIVs overlap */
div.tabs > div:target > div, :target #default2 > div {
  position: absolute;		/* All these DIVs overlap */
  z-index: -1}			/* Raise it above the others */

div.tabs :target {
  outline: none}
</style>
<body>
<div align="center">My Arduino Sensor Thing </div>
<div align="center">
  <div class=example>
    <div class=tabs>
     <div id=Temperature> <a href="#Temperature">Temperature</a>
      <div>Temperature

<div id="graphdiv2"
  style="width:500px; height:300px;"></div>
<script type="text/javascript">
  g2 = new Dygraph(
    document.getElementById("graphdiv2"),
    "temp.csv", // path to CSV file
    {}          // options
  );
</script></div>
     </div>

     <div id=Humidity> <a href="#Humidity">Humidity</a>
       <div>Humidity
	   <div id="graphdiv3"
  style="width:500px; height:300px;"></div>
<script type="text/javascript">
  g2 = new Dygraph(
    document.getElementById("graphdiv3"),
    "humid.csv", // path to CSV file
    {}          // options
  );
</script></div>
     </div>

     <div id=Lighting> <a href="#Lighting">Lighting</a>
       <div>Lighting
	   <div id="graphdiv4"
  style="width:500px; height:300px;"></div>
<script type="text/javascript">
  g2 = new Dygraph(
    document.getElementById("graphdiv4"),
    "light.csv", // path to CSV file
    {}          // options
  );
</script></div></div>
    
     <div id=Info> <a href="#Info">Info</a>
      <div>
        <p>Info
  
            
  
          

          put some info here
        </p>
        </div>
     </div>
    </div>
  </div>
</div>
</body>
</html>

Or the code on the arduino?

/*--------------------------------------------------------------
  Program:      eth_websrv_SD

  Description:  Arduino web server that serves up a basic web
                page. The web page is stored on the SD card.
  
  Hardware:     Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                2Gb micro SD card formatted FAT16
                
  Software:     Developed using Arduino 1.0.3 software
                Should be compatible with Arduino 1.0 +
                SD card contains web page called index.htm
  
  References:   - WebServer example by David A. Mellis and 
                  modified by Tom Igoe
                - SD card examples by David A. Mellis and
                  Tom Igoe
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - SD Card library documentation:
                  http://arduino.cc/en/Reference/SD

  Date:         10 January 2013
 
  Author:       W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

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

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 10, 1, 222); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

File webFile;

void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for debugging
    
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;    // init failed
    }
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");
}

void loop()
{
    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
                // 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");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    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();
                    }
                    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)
}

I have simply copy and pasted (Apart from the IP address) the arduino code from an online example, and it contains no code from my project, The code above is exactly what is loaded into my arduino whilst I am troubleshooting this issue.

So as mentioned, it is displaying the web page, but just not including the javascript.
You can see it working here: www.f3eak.co.uk/sensors (Click on temperature and a graph appears, it doesn't when hosted on my arduino)

The page served up by your server includes a reference to an external Javascript file. (dygraph.js) So in reality, when your browser goes to that site it will have to make a second HTML Get request to download that file.

If the webpage being served up by your arduino is the same, then your arduino code will have to check what file is being requested in the GET string. From a brief glance through your code, it looks like this second request (for the file dygraph.js) is going to recieve a second copy of index.htm) as you never seem to check what is being requested.

Edit: Actually you could check this quite easily. From your browser, simply enter the address you'd usually use to get your arduino page, but append it with /dygraph.js My guess is that it'll load index.htm.

Try the same on your website and you'll actually get the raw javascript file.

KenF:
Edit: Actually you could check this quite easily. From your browser, simply enter the address you'd usually use to get your arduino page, but append it with /dygraph.js My guess is that it'll load index.htm.

Try the same on your website and you'll actually get the raw javascript file.

Very good, you are indeed correct!

I know exactly what needs to be done, but admittedly I don't know the code to solve it.
However, I am going to go away and attempt to solve the problem myself, by learning/searching.

When I know the answer, I will come back and update this thread with my new found knowledge for your critique.

I'll probably spend a day or two on it, but if I can't solve it I'll pop back anyway for the next clue :wink:

Thank you for your help Ken.

You can simply embed the JavaScript within the page between tags avoiding an additional request. You can be fancy and use base64 also (wasteful) Embed javascript as base64 - Stack Overflow

Serving multiple files may be needed to have a bigger 'site', unless you can use JS/CSS to do everything in one page.

If you use lots of JS and/or images, meaning lots of requests. You could use a simple JS in the page to request each item one by one to reduce the server load.

Well before you waste the next couple of days. This might get you close. I don't have any hardware to test it on so it may take a bit of debugging.

/*--------------------------------------------------------------
  Program:      eth_websrv_SD

  Description:  Arduino web server that serves up a basic web
                page. The web page is stored on the SD card.
  
  Hardware:     Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                2Gb micro SD card formatted FAT16
                
  Software:     Developed using Arduino 1.0.3 software
                Should be compatible with Arduino 1.0 +
                SD card contains web page called index.htm
  
  References:   - WebServer example by David A. Mellis and 
                  modified by Tom Igoe
                - SD card examples by David A. Mellis and
                  Tom Igoe
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - SD Card library documentation:
                  http://arduino.cc/en/Reference/SD

  Date:         10 January 2013
 
  Author:       W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

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

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 10, 1, 222); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

File webFile;

void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for debugging
    
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;    // init failed
    }
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");
}

void loop()
{
  
String requestString = "" ;//String to store chars
    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
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                requestString = requestString + c;
                if (c == '\n' && currentLineIsBlank) 
                   {if (requestString.indexOf("dygraph")>0)
                    {// send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/plain");
                    client.println("Connection: close");
                    client.println();
                    webFile = SD.open("dygraph.js");        // open web page file
                    if (webFile) {
                        while(webFile.available()) {
                            client.write(webFile.read()); // send web page to client
                        }
                        webFile.close();
                    } 
                else
                    {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    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();
                    }
                   }
                 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)
}

pYro_65:
You can simply embed the JavaScript within the page between tags avoiding an additional request. You can be fancy and use base64 also (wasteful) Embed javascript as base64 - Stack Overflow

Serving multiple files may be needed to have a bigger 'site', unless you can use JS/CSS to do everything in one page.

If you use lots of JS and/or images, meaning lots of requests. You could use a simple JS in the page to request each item one by one to reduce the server load.

I actually attempted this after I left, because it seemed like the easiest route.
It takes 35 seconds for the page to fully load and even then it still doesn't display the graph.
The above method works fine on my website though, frustratingly.

But yes, I thought it was going to be that simple as well!

KenF:
Well before you waste the next couple of days. This might get you close. I don't have any hardware to test it on so it may take a bit of debugging.

/*--------------------------------------------------------------

Program: eth_websrv_SD

Description: Arduino web server that serves up a basic web
page. The web page is stored on the SD card.

Hardware: Arduino Uno and official Arduino Ethernet
shield. Should work with other Arduinos and
compatible Ethernet shields.
2Gb micro SD card formatted FAT16

Software: Developed using Arduino 1.0.3 software
Should be compatible with Arduino 1.0 +
SD card contains web page called index.htm

References: - WebServer example by David A. Mellis and
modified by Tom Igoe
- SD card examples by David A. Mellis and
Tom Igoe
- Ethernet library documentation:
Ethernet - Arduino Reference
- SD Card library documentation:
SD - Arduino Reference

Date: 10 January 2013

Author: W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

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

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 10, 1, 222); // IP address, may need to change depending on network
EthernetServer server(80); // create a server at port 80

File webFile;

void setup()
{
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
Serial.begin(9600); // for debugging

// initialize SD card
Serial.println("Initializing SD card...");
if (!SD.begin(4)) {
    Serial.println("ERROR - SD card initialization failed!");
    return;    // init failed
}
Serial.println("SUCCESS - SD card initialized.");
// check for index.htm file
if (!SD.exists("index.htm")) {
    Serial.println("ERROR - Can't find index.htm file!");
    return;  // can't find index file
}
Serial.println("SUCCESS - Found index.htm file.");

}

void loop()
{

String requestString = "" ;//String to store chars
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
            // last line of client request is blank and ends with \n
            // respond to client only after last line received
            requestString = requestString + c;
            if (c == '\n' && currentLineIsBlank) 
               {if (requestString.indexOf("dygraph")>0)
                {// send a standard http response header
                client.println("HTTP/1.1 200 OK");
                client.println("Content-Type: text/plain");
                client.println("Connection: close");
                client.println();
                webFile = SD.open("dygraph.js");        // open web page file
                if (webFile) {
                    while(webFile.available()) {
                        client.write(webFile.read()); // send web page to client
                    }
                    webFile.close();
                } 
            else
                {
                // send a standard http response header
                client.println("HTTP/1.1 200 OK");
                client.println("Content-Type: text/html");
                client.println("Connection: close");
                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();
                }
               }
             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)

}

Thank you for the code, and for your time in putting my IP address and filenames in.

It compiles easy enough, but I think you might be right about the debugging..!

When I upload this code i get this screen when I browse to the IP address of the arduino:

I'm comparing it against a working sketch at the moment. :slight_smile:

Do you actually have the javascript file there on the sd card?

KenF:
Do you actually have the javascript file there on the sd card?

Yes:


However, they are all in lowercase when viewing the SD card on a computer.

double post.

Have you changed the filename in bold to a 8.3 format?

I am hosting these files on the SD card.


index.htm
temp.csv
humid.csv
light.csv
dygraph-combined.js

And a javascript file is not a text/plain type file. It is an application/javascript type.

if (requestString.indexOf("dygraph")>0)
[i][/i]
[i]{// send a standard http response header[/i][i][/i]
[i]  client.println("HTTP/1.1 200 OK");[/i][i][/i]
[i]  client.println("Content-Type: application/javascript");[/i][i][/i]
[i]  client.println("Connection: close");[/i][i][/i]
[i]  client.println();[/i][i][/i]
[i]  webFile = SD.open("dygraph.js");        // open web page file[/i][color=#222222]
[/color]
[i]

I am beginning to dislike this new forum upgrade the more I use it. I'm going to leave the post just like it is. POS.

Yes Surfer, I changed it to dygraph.js, see my previous post :slight_smile:

I changed the code that KenF kindly posted with the addition that you just mentioned.

/*--------------------------------------------------------------
  Program:      eth_websrv_SD

  Description:  Arduino web server that serves up a basic web
                page. The web page is stored on the SD card.
  
  Hardware:     Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                2Gb micro SD card formatted FAT16
                
  Software:     Developed using Arduino 1.0.3 software
                Should be compatible with Arduino 1.0 +
                SD card contains web page called index.htm
  
  References:   - WebServer example by David A. Mellis and 
                  modified by Tom Igoe
                - SD card examples by David A. Mellis and
                  Tom Igoe
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - SD Card library documentation:
                  http://arduino.cc/en/Reference/SD

  Date:         10 January 2013
 
  Author:       W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

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

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 10, 1, 222); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

File webFile;

void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for debugging
    
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;    // init failed
    }
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");
}

void loop()
{
  
String requestString = "" ;//String to store chars
    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
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                requestString = requestString + c;
                if (c == '\n' && currentLineIsBlank) 
                   {if (requestString.indexOf("dygraph")>0)
                    {// send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: application/javascript");
                    client.println("Connection: close");
                    client.println();
                    webFile = SD.open("dygraph.js");        // open web page file
                    if (webFile) {
                        while(webFile.available()) {
                            client.write(webFile.read()); // send web page to client
                        }
                        webFile.close();
                    } 
                else
                    {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    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();
                    }
                   }
                 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)
}

I am at a loss as to why the page wont load now. :frowning:

I would try this. Display the web page on the serial monitor as you are uploading it to the client.
See if or where the index.htm file stops uploading.

[color=#222222]                    // send web page[/color][color=#222222][/color]
[color=#222222]                    webFile = SD.open("index.htm");        // open web page file[/color][color=#222222][/color]
[color=#222222]                    if (webFile) [/color][color=#222222][/color]
[color=#222222]                        while(webFile.available()) {[/color][color=#222222][/color]
[color=#222222]                           char ch = webFile.read();                            
                           client.write(ch); // send web page to client[/color][color=#222222][/color]
[color=#222222]                           Serial.write(ch);
                        }                           
[/color][color=#222222]                        webFile.close();[/color][color=#222222][/color]
[color=#222222]                    }[/color][color=#222222][/color]

Maybe the web browser needs to download the javascript file inline. If so, there will be problems. The ethernet shield can service only one client connection at a time.

This new forum upgrade is a POS. If you can't read it, too bad.

dygraph-combined.js

That's NOT how you spell dygraph.js

SurferTim:
This new forum upgrade is a POS. If you can't read it, too bad.

It's not the new forum, it's an issue of the Arduino IDE (never fixed) that formats the code to be published on the forum by inserting a lot of extra tag codes, useful if you choose the "quote" tags but useless if you use the proper "code" tags.
You can just select with your mouse the code, press CTRL+C (Win/Linux) or CMD+C (Mac) and then put it inside the proper code tags.

I didn't copy it from the IDE. I copied it from the OPs post.

edit: I just tried the same copy from a code section of the post and pasted it into a response, and now it works ok. My apology for "flying off the handle" a bit.

Don't worry... you're welcome :wink:

So this is the code again; nothing has changed, i.e. it wont display the page:

/*--------------------------------------------------------------
  Program:      eth_websrv_SD

  Description:  Arduino web server that serves up a basic web
                page. The web page is stored on the SD card.
  
  Hardware:     Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                2Gb micro SD card formatted FAT16
                
  Software:     Developed using Arduino 1.0.3 software
                Should be compatible with Arduino 1.0 +
                SD card contains web page called index.htm
  
  References:   - WebServer example by David A. Mellis and 
                  modified by Tom Igoe
                - SD card examples by David A. Mellis and
                  Tom Igoe
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - SD Card library documentation:
                  http://arduino.cc/en/Reference/SD

  Date:         10 January 2013
 
  Author:       W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

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

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 10, 1, 222); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

File webFile;

void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for debugging
    
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;    // init failed
    }
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");
}

void loop()
{
  
String requestString = "" ;//String to store chars
    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
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                requestString = requestString + c;
                if (c == '\n' && currentLineIsBlank) 
                   {if (requestString.indexOf("dygraph")>0)
                    {// send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: application/javascript");
                    client.println("Connection: close");
                    client.println();
                    webFile = SD.open("dygraph.js");        // open web page file
                    if (webFile) {
                        while(webFile.available()) {
                            client.write(webFile.read()); // send web page to client
                        }
                        webFile.close();
                    } 
                else
                    {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    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();
                    }
                   }
                 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)
}

I took the sage advice Surfer Tim gave, and put some serial outputs to identify what was happening.

I narrowed it down to this:

void loop()
{
   Serial.println("beginning of loop");
String requestString = "" ;//String to store chars
    EthernetClient client = server.available();  // try to get client
 Serial.println("step one");
    if (client) {  // got client?
        
         Serial.println("step two");
         boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   //

When viewing that section over the serial monitor I get this:

Initializing SD card...
SUCCESS - SD card initialized.
SUCCESS - Found index.htm file.
beginning of loop
step one

I know that it is reading the SD card.
I know that the ethernet is working, because I can ping the address that I have specified.
(When unplugging the device the ping drops, so it is definitely correct)
It is set to using port 80, so the browser would pick it up.

But it is failing at detecting the client when the code is being ran.

What am I missing?