Using GRID in an iframe-Problem

Hi all,

IÂ´m using a the grid in an iframe. In the document around the iframe I select the data I wanna display in the Grid.
After the selection I change the URL of the iframe and recreate the source with php.
example: <a href="grid.php?param1=1" taget="grid">

So far so fine.

But after selecting a cell in the Grid there occures a problem:

By selecting a new source and changing the the url to
grid.php?param1=2223 and the same target.
In this case IÂ´m getting a new window opened.

Can anybody give me a hint how to solve this ???

Metty

January 16,

has nobody really a hint ???
Alex ?

Metty

January 21,

For me it looks like there is a typing mistake somewhere. Sounds stupid, but maybe check again that you have exactly the same text in both iframe name attribute and anchor target attribute. I can't suggest any reason why the grid script can break frame navigation. If nothing helps, you can send me the code (support|at|activewidgets.com) maybe I will find something.

Alex (ActiveWidgets)

January 21,

Here is the testcode:

index.htm

<html>
<head>
</head>
<body>
<a href="testGridIframe.htm" target="myIFrame">link</a>
<br /><br /><br />
<iframe src="testGridIframe.htm" width="510" height="300" name="myIFrame" id="myIFrame" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
<p>Sorry, no Frames</p>
</iframe>
</body>
</html>

testGridIframe.htm

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="runtime/classic/activeui.css" rel="stylesheet" type="text/css" />
<script src="runtime/activeui.js"></script>

<style>
#grid1 {height: 78px;}
.active-controls-grid {height: 100%; font: menu;}
.active-column-0 {width: 60px; text-align: right;}
.active-column-1 {width: 60px; text-align: right; background-color: threedlightshadow;}
.active-column-2 {width: 60px; text-align: right;}
.active-column-3 {width: 60px; text-align: right; background-color: threedlightshadow;}
.active-column-4 {width: 60px; text-align: right;}
.active-column-5 {width: 60px; text-align: right; background-color: threedlightshadow;}
.active-column-6 {width: 60px; text-align: right;}
.active-row-highlight {background-color: threedshadow}
.active-row-highlight .active-row-cell {background-color: threedshadow}
</style>

<script>
var myData = new Array(
new Array("0","0","0","0","0","0"),
new Array("0","0","0","0","0","0"),
new Array("this is a freaky test","","","","","")
);

var myRows = ["line 1", "line 2","line 3"];

var myColumns = ["", "", "", "", "", "", ""];
</script>

</HEAD>
<BODY leftmargin=0 topmargin=0 marginheight="0" marginwidth="0">
<script>

function onmousewheel(event){
var scrollbars = this.getTemplate("layout").getContent("scrollbars");
var delta = scrollbars.element().offsetHeight * event.wheelDelta/480;
scrollbars.element().scrollTop -= delta;
}

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

obj.setId("grid1");
obj.setEvent("onmousewheel", onmousewheel);
obj.setRowHeaderWidth(110);
obj.setRowText(function(i){return myRows[i]});

// set number of rows/columns
obj.setRowCount(3);
obj.setColumnCount(6);

// provide cells and headers text
obj.setDataText(function(i, j){return myData[i][j]});
obj.setColumnText(function(i){return myColumns[i]});

// set click action handler
//obj.setAction("click", function(src){if(src.getProperty("row/index") == 2){document.forms["comment_area"].row_index.value=2;document.forms["comment_area"].column_index.value=src.getProperty("column/index");document.forms["comment_area"].comment.value=src.getProperty("item/text");};window.status = src.getProperty("item/text");});
obj.setAction("click", function(src){if(src.getProperty("row/index") == 2){document.forms["comment_area"].row_index.value=2;document.forms["comment_area"].column_index.value=src.getProperty("column/index");document.forms["comment_area"].comment.value=src.getProperty("item/text");};});

var row = obj.getTemplate("row");
row.setEvent("onmouseover", "mouseover(this, 'active-row-highlight')");
row.setEvent("onmouseout", "mouseout(this, 'active-row-highlight')");

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

</script>
</BODY>
<HTML>

So, just open index.htm and klick on the link. => Iframe is getting reloaded.

click anywhere in the grid and click again on the link => I get a new window.

Hope this helps.
I cannot find any mistake in here :(

Metty

January 21,

Yes, I can replicate this. Very difficult to believe until you actually see it. I will investigate this - looks like my fault somewhere...

Alex (ActiveWidgets)

January 21,

cool, thanks a lot

Metty

January 21,

Yes, this is my fault. This bug will be fixed in 0.2.5. If you would like to implement the fix now - here is the patch:

<script>
Active.System.HTML.patch = function(){

var obj = this.prototype;

obj.refreshClasses = function(){

var element = this.element();
if (!element) {return}

var s = "", classes = this._classes.split(" ");
for (var i=1; i<classes.length; i++){
var name = classes[i];
var value = this["_" + name + "Class"];
if (typeof(value)=="function") {
value = value.call(this);
}
s += "active-" + name + "-" + value + " ";
}
element.className = s + this.$browser;
};

};

Active.System.HTML.patch();
</script>

Many thanks for pointing this out

Alex (ActiveWidgets)

January 22,

You are great man, the supportspeed is incredible :=)

Metty

January 22,

You are great man, the supportspeed is incredible :=)

Xico

April 19,

This topic is archived.

Using GRID in an iframe-Problem

See also:

Search

New Data Grid

Version 2