:: Forum >> Version 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(eventindex){
                    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.  Butclick 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 {height100%; width100%; margin0pxbordernonefontmenu;}
        .
aw-row-selector {text-aligncenter}

        .
aw-column-{width:  80px;}
        .
aw-column-{width200px;}
        .
aw-column-{text-alignright;}
        .
aw-column-{text-alignright;}
        .
aw-column-{text-alignright;}

        .
aw-grid-cell {border-right1px solid threedlightshadow;}
        .
aw-grid-row {border-bottom1px 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([strstrnumnumnum]);

        
//    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(eventcolrow){window.status this.getCellText(colrow)};

        
//    write grid html to the page
        
document.write(obj);
    </
script
Joe Hudson
Thursday, May 25, 2006
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 -

/javascript.forum.14014.0/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)
Thursday, May 25, 2006
Thank you so much for the help!
Joe Hudson
Thursday, May 25, 2006



This topic is archived.

Back to support forum

Forum search