CSV - Text file in Win 7 Sidebar

Dienstag, 5. Juni 2012 12:29

Hello All,

I'm developing a sidebar application that will take a CSV text file and turn it into an array to display summary information on the initial page and detailed information on the flyout. The data will be provided from a network server. The issue I am running into is that I cannot get the data from the text file to display in either gadget window. I've been able to get the information to display in a browser(ie 9, firefox, chrome) but not in the gadget. This is the first gadget I've ever developed so any help/clarifications would be appreciated. Below is the flyout html file. The button isn't integral to the page, just using it to execute the form for testing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
    <link rel="Stylesheet" type="text/css" href="jquery-ui-1.8.1.custom.css" /><!--this pulls the style sheet info-->
    <script type = "text/javascript" src = "jquery-1.7.2.js"></script><!-- this pulls the jquery scripting language -->
    <script type="text/javascript" src="jquery-ui-1.8.1.custom.min.js"></script><!--this gives the UI customization -->

    </script>

        <script type="text/javascript">
            var allText = [];
            var allTextLines = [];
            var Lines = [];
            var txtFile = new XMLHttpRequest();
            function cheese() {
                txtFile.open("GET", "http://folderfordocument/fileneeded.csv", true);
                allText = txtFile.responseText;
                allTextLines = allText.split(/\r\n|\n/);
                //alert(allTextLines);
                txtFile.onreadystatechange = function () {
                    if (txtFile.readyState == 4) {

                        // Makes sure it's found the file.
                        allText = txtFile.responseText;
                        allTextLines = allText.split(/\r\n|\n/);

                        $("#daily").html(allText);
                    }

                }
                txtFile.send(null)
            }

    </script>

    <title>Test</title>
</head>
<body>
    <h1>Here's my header</h1>

            <form action="">
        <p>
            <button type="button"  onclick="cheese()">Get Table</button>
        </p>

    </form>
    <div id="daily">Here's where I want the info to go</div>

    <h2>And this will be the bottom of my page</h2>
</body>
</html>

Thanks,

Patrick

Bearbeitet Patrick Justice Dienstag, 5. Juni 2012 13:23 clarification

Alle Antworten

Dienstag, 5. Juni 2012 14:18

1
If I had to guess - and I am - I'd say that since you have async set to true in the open statement, it is because you have defined a variable as equal to the responseText outside of the onreadystatechange function. With asynchronous operation, the responseText only becomes available when the readystate===4 and the status===200. Try this function :
```
function cheese(){
 txtFile.open("GET", "http://folderfordocument/fileneeded.csv", true);
 txtFile.onreadystatechange=function(){
  if(txtFile.readyState===4){
   if(txtFile.status===200){
    allText = txtFile.responseText;
    allTextLines = allText.split(/\r\n|\n/);
    $("#daily").html(allText);
   }
  }
 };
 txtFile.send();
}
```
And not guessing any more - just tried it in another gadget and mentioning the responseText before the onreadystatechange function scuttled the request. Shows how forgiving browsers must be. But if you can run it in IE9, try opening the Developer Tools (F12) and looking at the script console.
- Als Antwort markiert Patrick Justice Dienstag, 5. Juni 2012 14:51
- Antworten
- Zitieren
Dienstag, 5. Juni 2012 14:50

0

Mystifeid,

I appreciate the answer and now the CSV file is visible in my flyout. For my clarification and for others who might find the answer on the internet, my mistake was not including a status check 200 qualification?

Javascript seems easy but there are plenty of ways to make mistakes.

Patrick
- Antworten
- Zitieren
Dienstag, 5. Juni 2012 16:19

0
As mentioned, I think the problem was also caused by using "responseText" outside of the onreadystatechange function.

Glad it is working for you now.

You can experiment for yourself - the function below has one line added back to it - this should make it inoperative (ie it won't work) - because it is trying to access the responseText before it is available :
```
function cheese(){
 txtFile.open("GET", "http://folderfordocument/fileneeded.csv", true);
 allText = txtFile.responseText;//this line should kill the function
 txtFile.onreadystatechange=function(){
  if(txtFile.readyState===4){
   if(txtFile.status===200){
    allText = txtFile.responseText;
    allTextLines = allText.split(/\r\n|\n/);
    $("#daily").html(allText);
   }
  }
 };
 txtFile.send();
}
```
Have fun !
- Bearbeitet mystifeid Dienstag, 5. Juni 2012 16:20
- Antworten
- Zitieren