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 --
-- page 1 --
-- page 2 --
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,