3.2.0
Forum Demo Guide API Store

HELP!!! CSV tbl.request fails on host

Hi all,

I am stuck with the problem.

I have built a page using html and javascript and it works fine from my local machine. As soon as I copy the file to the server and run it from there it does not work. The line it fails on is tbl.request();

I have been on this problem for too long and I think I need some more eyes. thanks in advance guys.

here's the full code: 
<html>
<head>
    <script src="../../runtime/lib/aw.js"></script>
    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>
    #myGrid { width: 600px;  margin: 0px; padding: 0px; background: #404040;}

    #myGrid .aw-grid-row {height: 16px; border-bottom: 1px solid #C6C6C6; }

    #myGrid .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
    #myGrid .aw-alternate-odd  .aw-column-0 {background: #E0E0E0;}
    #myGrid .aw-alternate-even {background: #E7E7D6;}
    #myGrid .aw-alternate-odd  {background: #F7F3E7;}

    #myGrid .aw-cells-selected {background: default; color: black;}

    #myGrid .aw-column-0  {width:  50px; border-right: 1px solid #848484; cursor:default;}
    #myGrid .aw-column-1  {width: 110px; border-right: 1px solid #C6C6C6; cursor:hand;	}
    #myGrid .aw-column-2  {width:  70px; border-right: 1px solid #C6C6C6; cursor:hand;	text-align: right; }
    #myGrid .aw-column-3  {width:  70px; border-right: 1px solid #C6C6C6; cursor:hand;	text-align: right; }
    #myGrid .aw-column-4  {width:  70px; border-right: 1px solid #C6C6C6; cursor:hand;	text-align: right; }
    #myGrid .aw-column-5  {width:  70px; border-right: 1px solid #C6C6C6; cursor:hand;	text-align: right; }
    #myGrid .aw-column-6  {width:  70px; border-right: 1px solid #C6C6C6; cursor:hand;	text-align: right; }
    #myGrid .aw-column-7  {width:  70px; border-right: 1px solid #C6C6C6; cursor:hand;	text-align: right; }
    #myGrid .aw-column-8  {width:  70px; border-right: 1px solid #C6C6C6; cursor:hand;	text-align: right; }
    #myGrid .aw-column-9  {width:  70px; border-right: 1px solid #C6C6C6; cursor:hand;	text-align: right; }
    #myGrid .aw-column-10 {width:  70px; border-right: 1px solid #C6C6C6; cursor:hand;	text-align: right; }
    #myGrid .aw-column-11 {width:  70px; border-right: 1px solid #C6C6C6; cursor:hand;	text-align: right; }

    #myGrid .aw-grid-headers {font-weight: bold; cursor:pointer;}
    #myGrid .aw-grid-footers {background: #E7E7D6; border-top: 1px solid #C6C6C6; border-bottom: 1px solid #C6C6C6; }
    #myGrid .aw-grid-footers .aw-column-0 {background: #E0E0E0;}
    
    #myInpt {width:120%; height:100%; margin:-2px; margin-left:-4px;}
</style>

<script>
//
//  had to add
// 		e.select(); 
//	after 
//		e.setExpression("test", "this.value"); 
//	in 
//		lib/templates/input.js
//
//  for selecting the text in the edit of a cell.
//
    new AW.CSV.Table; 
    AW.CSV.Table.prototype.response = function(text){ 
        this._rows = text.split(/\r*\n/); 
        this._data = []; // missing in beta3 
        if (this.$owner) { 
            var sortCol = this.$owner.getSortColumn();				// required for keeping sort
            var sortDir = this.$owner.getSortDirection(sortCol);	// required for keeping sort
    //        this.$owner.clearScrollModel(); // missing in beta3 
            this.$owner.clearSelectionModel(); 
            this.$owner.clearSortModel(); 
            this.$owner.clearRowModel(); 
            this.$owner.setRowCount(this.getCount()); 
            this.$owner.refresh(); 
            if (sortCol>= 0) this.$owner.sort(sortCol, sortDir);  // added a resort to make sure sorting is kept after refresh.
        } 
    }; 
//
// Declaring objects...
//	
    var tbl = new AW.CSV.Table;
    var obj = new AW.Grid.Extended;
    var str = new AW.Formats.String;
    var num = new AW.Formats.Number;
    var htm = new AW.Formats.HTML;
    var edt = new AW.UI.Input;
//
// Declaring some variables...
//	
    var reloadid
    var myCODE  = ""
    var myCODEc = 0;
    var myCODEr = 0;
    var myURL   = "http://au.finance.yahoo.com/d/quotes.csv?s=";	// just remove the (au.) for US time.
    var myCODES = "BHP.AX,TLS.AX,CBA.AX,NAB.AX,WBC.AX,AXA.AX,RIO.AX,AGL.AX,ALL.AX,AMP.AX,ANZ.AX,AMC.AX,BIL.AX,BLD.AX,CCL.AX,CML.AX";
    var myCOLS  = "&f=snc6p2l1b3b2ohgt1d1&e=.csv";					// codes: http://gummy-stuff.org/Yahoo-data.htm
    var myColor = 2; // column which colors cell data.
    var myHeaders = ["Code", "Name", "+/-",  "%", "Last", "Bid", "Ask", "Open", "High", "Low", "Time", "Date"];
    var myFormats = [   str,    str,   num,  num,    num,   num,   num,    num,    num,   num,    str,    str];
    var myFooters = [];
//
// Initialising...
//
    tbl.setURL(myURL+myCODES+myCOLS);
    tbl.request();															// Async retrieval of data 
    obj.setCellModel(tbl);													// row length set dynamically from data
    obj.setHeaderText(myHeaders);											// set the headers
    tbl.setFormats(myFormats);												// set the formats 
    obj.setColumnCount(myHeaders.length);									// dynamic column length from data
    obj.setId("myGrid");													// necessary for CSS rules
    obj.setCellEditable(false);												// disable editing on all
    obj.setCellEditable(true , 0);											// Enable editing on column 0
    obj.setHeaderCount(1);													// make sure only one header line.
    obj.setSelectorVisible(false);											// remove row selector.
    obj.setVirtualMode(false);												// disable virtual mode
    obj.setFooterVisible(true);												// enable footer
    obj.setFooterText(myFooters);											// set blank line text
    obj.setFooterCount(1);													// make sure only one footer line
    obj.setFooterHeight(16);												// set standard row height
    edt.setId("myInpt");													// necessary for CSS rules
    
    
    obj.defineCellProperty("color", function(col, row){ return colorCell( this.getCellText(myColor, row) ); }); 
    obj.getCellTemplate(0).setStyle("color", function(){ return this.getControlProperty("color"); }); 
    obj.getCellTemplate(2).setStyle("color", function(){ return this.getControlProperty("color"); }); 
    obj.getCellTemplate(3).setStyle("color", function(){ return this.getControlProperty("color"); }); 
    
    
    document.write(obj);

//
//	Required to capture edited text as it is typed...
//
    obj.onCellTextChanged=function(val,col,row){ 					
        myCODE = val;
        myCODEc = col;
        myCODEr = row;
    } 
//
//  Required to commit the change of edited text once editing complete.
//
    obj.onCellValueChanged=function(val,col,row){
        if (col==myCODEc && row==myCODEr) {
            myCODE = addCodeClean(myCODE);
            if (myCODES.indexOf(myCODE)>=0) myCODE="";
            if (myCODE != val) {
                updateCodes(myCODE,col,row);
                //clearTimeout(reloadid);
                reload(0);
            }
        }
    } 
//
//	Required for drag and drop of body...
//
    obj.onCellMouseDown		= function(event, column, row){ if (column>0) dragstart(event) };
    obj.onCellMouseUp		= function(event, column, row){ dragstop() };
    obj.onControlMouseUp	= function(event){ dragstop() };
//
//  Required for adding code to grid
//
    obj.onFooterClicked 	= function(event,index){ 
                                //if (index==0){ 
                                    obj.setFooterText(edt,0);
                                    obj.getFootersTemplate(0,0).refresh();
                                    var edit = edt.element().getElementsByTagName("input")[0];
                                    edit.focus();
                                    edit.select();
                                    AW.attachEvent(edit, "onblur", addCode);
                                    AW.attachEvent(edit, "onkeydown", addCodeKey);
                                //} 
                              };
//
//  Function that refreshes data in grid based on new myCODES list...
//
    function reload(i){
        var now = new Date();
        
        //document.getElementById("info2").innerHTML = myCODES;
        
        tbl.setURL(myURL+myCODES+myCOLS);
        tbl.request();
        for(var i=2;i<obj.getColumnCount();i++) obj.getCellTemplate(i).refresh();

        var now1 = new Date();
        var load = (now1-now) / 1000;
        window.status = "Last Response: " + now1 + " ... Live Response Time: " + load + " secs";
        
        if (i==0) return reloadid;
        
        reloadid=setTimeout('reload()', 5000);  // 5 second refresh
    }
//
//  Function that is fired onblur of input footer box.
//
    function addCode(){
        var edit = edt.element().getElementsByTagName("input")[0];
        myCODE = addCodeClean(edit.value);				// get and clean the code entered
        AW.detachEvent(edit, "onblur", addCode);
        obj.setFooterText("",0);						// remove the edit box.
        obj.getFootersTemplate(0,0).refresh();			
        if (myCODES.indexOf(myCODE)<0) {				// if code does not already exist in the list
            myCODES = myCODES + "," + myCODE;			// then add it
            //clearTimeout(reloadid);				
            reload(0);									// and refresh data
        }
    }
//
//	Function that captures the return key on footer edit box and fires the onblur event.
//
    function addCodeKey(e){
        var code = event.keyCode;
        if (code == 13) addCode(); 
    }
//
//  Function to clean code... (make it upper case and add extension of .AX for Australian Codes.)
//
    function addCodeClean(c){
        c = c.toUpperCase();
        if (c.indexOf(".")<0 && c.length>0)  return c+".AX";
        else return c;
    }
//
//  Function that updates the code list with the new value
//
    function updateCodes(v,c,r){
        str = "";
        for (var x=0;x<obj.getRowCount();x++) {
            if (c==0 && r==x) str = str + "," + v;
            else str = str + "," + obj.getCellText(0,x);
        }
        myCODES = str.substr(1);
    }
//
//  Fucntion will be used later to color background of each cell changed.
//
    function colorCell(v) {
        if (v<0) return "#A00000";
        if (v>0) return "#00A000";
        return "default";
    }
    function colorCellbackground(o,n,x,y) {
        if (o) { 	if (n > o[x]) obj.getCellTemplate(x, y).setStyle("background", "#C0F8C0"); 
                    if (n < o[x]) obj.getCellTemplate(x, y).setStyle("background", "#F8C0C0"); }
    }


//
//  Dragging functions...
//
    var dragapproved=false
    var offsetx, offsety, tmpx, tmpy, maxx, maxy
    
    function dragstart(e){
        dragapproved=true;
        offsetx=event.clientX;
        offsety=event.clientY; 
        tmpx=obj.getScrollLeft();
        tmpy=obj.getScrollTop();
        maxx=obj.getScrollWidth() - document.getElementById("myGrid").offsetWidth + 18;
        maxy=obj.getScrollHeight() - document.getElementById("myGrid").offsetHeight + 18;
        if (document.getElementById("myGrid")) document.getElementById("myGrid").onmousemove=dragdrop
    }
    
    function dragdrop(e){
        if (dragapproved&&event.button==1){
            x=tmpx+offsetx-event.clientX
            y=tmpy+offsety-event.clientY
        }
        if (x<0)x=0;
        if (y<0)y=0;
        if (x>maxx)x=maxx;
        if (y>maxy)y=maxy;
        obj.setScrollLeft(x);
        obj.setScrollTop(y);
    }
    
    function dragstop(){
        dragapproved=false;
        if (document.getElementById("myGrid")) document.getElementById("myGrid").onmousemove=null;
    }


</script>
<p></p>
<input type="button" value="refresh" onclick="reload()"/>
<input type="button" value="stop"    onclick="clearTimeout(reloadid);"/><br/>
<p id="info" name="info" style="font-family:arial;font-size:12px">

Double click on a code and change it to change the item. <br>
Double click on a code and delete the text and it will delete the line. <br>
Click on the footer and add a code it will add a line to the list. <br>
Click and drag on the body data to scroll.

</p>
<p id="info2" name="info2" style="font:courier;font-size:10px">
</p>
</body>
</html>
Alex from Sydney
January 9,
Update on this problem,

I have reinstalled the original beta3 and ran the load csv.htm from the old examples. this worked. I then changed the seturl command to look at some simple text from yahoo...
http://finance.yahoo.com/d/quotes.csv?s=BHP,MSFT&f=snl1b3b2&e=.csv

if you run this in your browser its fine. But off the server it fails.

Any Ideas. Please ...

I am using ie
Alex from Sydney
January 10,
Ive just done some debugging and I get a permission denied on the aw._http.open command. any ideas. ????
Alex from Sydney
January 10,
I may be wrong, but with normal security settings on your browser, I am pretty sure you can't read data from another domain with Javascript, without getting errors. If you lower your security settings it may work. AFAIK you need to use the same domain to load data. Can anyone else confirm that?
Tony
January 10,
yes, this is due to the cross-domain security restrictions - you can only request data from your own domain. You have to make data requests to another domains through a proxy script on your own server.
Alex (ActiveWidgets)
January 10,
Thanks for the info guys, I have done this through asp.net code. I might try and use this to request the page first then return this to the CSV tbl.request
I'll let you know.
Alex from Sydney
January 10,
Excellent! it worked... Thanks. Alex / Tony for your input...

here is the resulting .net code 
<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="System.Net" %>
<%@ Import Namespace="System.IO" %>
<script language="VB" runat="server">

   Sub Page_Load(Src As Object, E As EventArgs)
      dim astr
      dim URL2 
      URL2 = request.querystring("u")
      URL2 = replace(URL2,"-","&")          ' not the best way to pass params (I know)
      astr = readHtmlPage(URL2)
      myPage.Text = astr
   End Sub

   Function readHtmlPage(url As String) As String
      Dim objResponse As WebResponse
      Dim objRequest As WebRequest
      Dim result As String
      objRequest = System.Net.HttpWebRequest.Create(url)
      objResponse = objRequest.GetResponse()
      Dim sr As New StreamReader(objResponse.GetResponseStream())
      result = sr.ReadToEnd()
      sr.Close()
      return result
   End Function
</script>
<asp:literal id="myPage" runat="server"/>


And here is the modifed section of code from the above post 

var myURL   = "http://www.mydomain.com.au/aspdotnetcode.aspx?u=http://au.finance.yahoo.com/d/quotes.csv?s=";  
    var myCODES = "BHP.AX,TLS.AX,CBA.AX,NAB.AX,WBC.AX,AXA.AX,RIO.AX,AGL.AX,ALL.AX,AMP.AX,ANZ.AX,AMC.AX,BIL.AX,BLD.AX,CCL.AX,CML.AX"; 
    var myCOLS  = "-f=snc6p2l1b3b2ohgt1d1-e=.csv";      //note the & were changed to  -   here and are replaced by the .net code


change www.mydomain.com.au to your own domain and aspdotnetcode.aspx to the filename of the program above... and thats it.

Thanks again Alex(ActiveWidgets). Your grid is working a treat and is an Excellent project, the best ive seen on the net and I have been looking for a grid for a while. Let me know if you need any help.
Alex from Sydney
January 10,
Exactly, that is what Alex was refering to as proxy which I normally call a tunnel to access data outside the domain. I use XMLHttpRequest methods to load the data, but not the built in AW library because I found the code I use to be simpler. But it's probably my lack of experience with AW code.
Tony
January 10,
Thanks Tony, maybe you could post a sample of your code for reference as well.
Alex from Sydney
January 10,
Here is my function. It's not using ASYNC but it works for most of my purposes. Also I also usually use POST that way if I need to POST data then I just pass to the function, otherwise I just pass GET in the URL. 

function loadDoc(url,postdata) {
    req = false;
    if (window.XMLHttpRequest) {
    	try { req = new XMLHttpRequest(); } catch(e) { req = false; }
    } else if (window.ActiveXObject) {
       	try { req = new ActiveXObject("Msxml2.XMLHTTP"); } 
        catch(e) { 
            try { req = new ActiveXObject("Microsoft.XMLHTTP"); }
            catch(e) { req = false; }
        }
    }
    if(req) {
        req.open("POST", url, false);
        req.onreadystatechange = function() {return true;}
        req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        req.send(postdata);
        return req.responseText;
    }
}
Tony
January 10,

This topic is archived.

See also:

Help?!-Posting cell data to new window? max freeman (17)
Alex, We could use a little help Column Resizing Jim Shaffer (15)
Html help. (14)
Help getting new row data for csv write. Justin (Boston) (6)
Help with Tabs cpuri (11)
need help with filter based on input value Dave (11)
Jim Shaffer Please Help Ramya (10)
Grid fails in IE when 'Play animations in webpages' is disabled Justin (9)
Ok, I am a complete muppet can someone help me. Complete Muppet. (8)
setCellText method used can cause setCellText by col to FAIL G. Cayman (8)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us