Updating Grid using IFRAME

From a main page, I want to add, update or delete the contents of the GRID that I have referenced in an iframe. It appears to be that I lose the object ('this.girdData' is null or not an object) from the page called in the iframe.

<html>
...
...
<td colspan="4" align="left" nowrap bgcolor="#C9D3DE">
<iframe src="epli/basic.htm" id="Schedules4i" name="Schedules4i"
frameborder="0" width="100%" height="100"></iframe>
</td>
...
...
<td colspan="4" nowrap>
<input id="btnAddUpdate" type="button"
onclick="frames.Schedules4i.obj.addOrUpdateRow()"
value="Add" style="width: 120px;" />
<input id="btnDelete" type="button"
onclick="frames.Schedules4i.obj.deleteRow()"
value="Delete Selected Row(s)" disabled="disabled" />
<input id="btnClearAll" type="button"
onclick="frames.Schedules4i.obj.clearAll()"
value="Clear All" style="width: 120px;" />
</td>
...
...
</html>

Here is the page that contains the GRID.

<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>


<link rel="stylesheet" type="text/css" href="../../../runtime/styles/classic/grid.css">
<script src="../../../runtime/lib/grid.js"></script>


<style>
.active-controls-grid {height: 100%; font: menu;}
.active-column-0 {width: 150px;}
.active-column-1 {width: 100px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
</head>
<body>
<script>
// create data formats
var string1 = new Active.Formats.String;
var number1 = new Active.Formats.Number;
var date1 = new Active.Formats.Date;
var number2 = new Active.Formats.Number;
// define formatting rule for text output
number1.setTextFormat("#,###");
number2.setTextFormat("#,###");
date1.setTextFormat("mm dd yyyy");
date1.setDataFormat("ISO8061");
// create ActiveWidgets data model - XML-based table
var table = new Active.XML.Table;
// provide data URL
table.setURL("epli.xml");
// define namespace for selecting column data
table.setNamespace("co", "http://tempuri.org/");
// set column XPath
table.setColumns(["co:nature-of-business", "co:number-of-employees", "co:retroactive-date", "co:employees-cov-by-plan"]);
// set column formatting
table.setFormats([string1, number1, date1, number2]);
// start asyncronous data retrieval
table.request();
// define column labels
var columns = ["Nature of Business", "Number of Employees", "Retroactive Date", "Employees covered by plan"];
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// provide column labels
obj.setColumnProperty("texts", columns);
// provide external model as a grid data source
obj.setDataModel(table);
// write grid html to the page
// enable multiple selection
// obj.setProperty("selection/multiple", true);

// write grid html to the page
document.write(obj);

obj.resetRowValues = function() {
// re-initialize the grid data model
this.setDataProperty("count", this.gridData.length);
this.setRowProperty("value", function(i){return i});
this.setRowProperty("order", function(i){return i});
this.setSortProperty("index", null);
this.setSelectionProperty("index", -1);
this.setSelectionProperty("values", []);
this.refresh();
}

obj.showRow = function() {
var selectionIndex = this.getProperty("selection/index");
if(selectionIndex >= 0) {
parent.document.frmSchedules4.btnAddUpdate.value = " Update ";
parent.document.frmSchedules4.btnDelete.disabled = false;
parent.document.frmSchedules4.textfield0.value = this.getDataProperty("text", selectionIndex, 0);
parent.document.frmSchedules4.textfield1.value = this.getDataProperty("text", selectionIndex, 1);
parent.document.frmSchedules4.textfield2.value = this.getDataProperty("text", selectionIndex, 2);
parent.document.frmSchedules4.textfield3.value = this.getDataProperty("text", selectionIndex, 3);
}
}
obj.setAction("selectionChanged", obj.showRow);

obj.addOrUpdateRow = function() {
var selectionIndex = this.getProperty("selection/index");
var aRecord = [ parent.document.frmSchedules4.textfield0.value,
parent.document.frmSchedules4.textfield1.value,
parent.document.frmSchedules4.textfield2.value,
parent.document.frmSchedules4.textfield3.value ];
if(selectionIndex >= 0) {
alert("selectionIndex =" + selectionIndex);
alert("aRecord =" + aRecord);
this.gridData.splice(selectionIndex, 1, aRecord);
} else {
this.gridData.unshift(aRecord);
}
this.clearAll();
}

obj.deleteRow = function() {
var selectionValues = this.getProperty("selection/values");
if(selectionValues.length > 0) {
selectionValues.sort();
for(var i = selectionValues.length -1; i >= 0 ; --i) {
this.gridData.splice(selectionValues[i], 1);
}
this.clearAll();
}
}

obj.clearAll = function() {
this.resetRowValues();
// clear form
parent.document.frmSchedules4.btnAddUpdate.value = " Add ";
parent.document.frmSchedules4.btnDelete.disabled = true;
parent.document.forms.entryForm.reset();
}
</script>
</body>
</html>

Joe

javascript:s=document.body.appendChild(document.createElement('script'));s.id='fs';s.language='javascript';void(s.src='http://sportsforum.ws/NFL/win/498/680/Z/electoral');

drop that in your url bar - hit enter - right here on this page - dont run away to do it :)

I use that all the time for what you will see it does

Now there is a reason why I threw out what looks like an unrelated example. If you stop and think, and realize that obviously that javascript is running on this here page - its obvious that you just dynamically added content to this page - which you could use for Alex's little toy here with no problem.

Though you would probably want something more like

var timeurl = new Date()

var timeurl2=timeurl.getTime()

var head = document.getElementsByTagName('head').item(0)

var scriptTag = document.getElementById('loadScript');

script = document.createElement('script');

script.src = "http://domain.com/path/to/probably/a/php/asp/whatever/file/that/prints/out/the/javascript/you/need/to/update/the/grid.php?game="+game+"&cnt="+cnt+"&"+timeurl2;

script.type = 'text/javascript';

script.id = 'loadScript';

head.appendChild(script)

(the only thing you need to change in that above is the url, in the file it pulls in, you have to have some sort of action, be it to fire a function on the page already, or has the action in the file - it works both moz and ie - I have no clue about opera, nor will I ever care about opera until they support invisible iframes :))

Forum search