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>
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>
