3.0 beta 2

having trouble with grid inside tab (loaded with ajax)

Hello, I've made an example here: http://216.82.124.2/test/index.html

The main page as 2 tabs. The tab on the left will cause an ajax request for a page containing a grid. Alex, could you or anybody else for that matter help me get this to work? It will be easy to see what is messing up. Any help would be greatly appreciated. Thanks.

I'll past the contents of the pages below so you don't have to view source:

-- index.html --
<html>
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <link rel="stylesheet" href="http://localhost:8080/static/scripts/aw/aw.css" type="text/css">
        <script type="text/javascript" src="scripts/aw/aw.js"></script>
        <script type="text/javascript" src="scripts/ajax/prototype.js"></script>
        <script type="text/javascript" src="scripts/ajax/scriptaculous.js"></script>
    </head>
    <body>
        <script language="javascript">
            function updateTabContentclassificationsTab (url) {
                new Ajax.Request(url, {
                    method: "post",
                    onSuccess: function (transport) {
                        rsp = transport.responseText;
                        Element.update("classificationsTab_page", rsp);
                    }
                });
            }
            var objclassificationsTab = new AW.UI.Tabs;
            objclassificationsTab.setId("classificationsTab");
            objclassificationsTab.setItemText(["Page 1","Page 2"]);
            objclassificationsTab.setItemCount(2);
            objclassificationsTab.onItemClicked = function(event, index){
                    if (index == 0) {
                        updateTabContentclassificationsTab("page1.html");
                    }
                    if (index == 1) {
                        updateTabContentclassificationsTab("page2.html");
                    }
             };
            objclassificationsTab.setSelectedItems([0]);
            document.write(objclassificationsTab);
            updateTabContentclassificationsTab("page1.html");
        </script>
        <div id="classificationsTab_page" style="margin-bottom: 5px; border: 1px solid #999; padding: 4px;"></div>
    </body>
</html>



-- page 1 --
This page works fine.  I can even do some javascript.  But, click page 2 (a grid should show up but doesnt...)
<script language="javascript">
    alert("can you see this?");
</script>




-- page 2 --
<!-- grid format -->
    <style>
        .aw-grid-control {height: 100%; width: 100%; margin: 0px; border: none; font: menu;}
        .aw-row-selector {text-align: center}

        .aw-column-0 {width:  80px;}
        .aw-column-1 {width: 200px;}
        .aw-column-2 {text-align: right;}
        .aw-column-3 {text-align: right;}
        .aw-column-4 {text-align: right;}

        .aw-grid-cell {border-right: 1px solid threedlightshadow;}
        .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
    </style>

    <!-- grid data -->
    <script>
        var myData = [
            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
            ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
        ];

        var myColumns = [
            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
        ];
    </script>

    <script>
        var obj = new AW.UI.Grid;

        //	define data formats
        var str = new AW.Formats.String;
        var num = new AW.Formats.Number;

        obj.setCellFormat([str, str, num, num, num]);

        //	provide cells and headers text
        obj.setCellText(myData);
        obj.setHeaderText(myColumns);

        //	set number of rows/columns
        obj.setRowCount(20);
        obj.setColumnCount(5);

        //	enable row selectors
        obj.setSelectorVisible(true);
        obj.setSelectorText(function(i){return this.getRowPosition(i)+1});

        //	set headers width/height
        obj.setSelectorWidth(28);
        obj.setHeaderHeight(20);

        //	set row selection
        obj.setSelectionMode("single-row");

        //	set click action handler
        obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};

        //	write grid html to the page
        document.write(obj);
    </script>
Joe Hudson
May 25,
The problem here is that document.write() can only be used during page load. If you call document.write() after the page loading is completed - it will replace the current page with the new empty page and write the content there.

The solution is using div.innerHTML = obj or the technique described here -

/datagrid.14014/separating-aw-code-from-html.html

The second page should look like -

<div id="grid">grid goes here...</div>
<script>
        var obj = new AW.UI.Grid;
        obj.setId("grid");
        ...
        obj.refresh();
</script>
Alex (ActiveWidgets)
May 25,
Thank you so much for the help!
Joe Hudson
May 25,

This topic is archived.

See also:


Back to support forum

Search

Version 2

Looking for AW 2.6 ?
The old site is here.