JavaScript Forum

**Fluf** · 06-12-2009, 06:58 AM

I've tried this a godawful amount of times. The problem is that I need to call the getElementByID through a counting variable in a while.

The code that matters is this: ([.....] means I left a chunk out. :P )

PHP Code:


			
function goLeft()
{
window.frames['left'].location.href='http://rpg.fluffywolf.com/load.php'
}

[.....]
 
Parent:
//In a while, $i counting from 1 to 761. printing 760 images into the parent html
 <img id="<?php echo "tile".$i; ?>"
 
[.....]
 
<input type="button" onclick="goLeft();" value="Go Left" style="position:absolute;top:20px;left:20px;z-index:200;" />
<iframe name="left" src="" style="position:absolute; top:2000px;left:2000px;width:1px;height:1px;border:0px;"></iframe>

Iframe:

PHP Code:


			
<script language="javascript">
var styleXX;
<?php
$i=0;
while ($i<=760) {
 $i++;
 if ($move[left][$i]=="X") {  
  ?>
  styleXX=parent.document.getElementByID['<?php echo "tile".$i; ?>'].style.left.replace(/px/g,"");
  parent.document.getElementByID['<?php echo "tile".$i; ?>'].style.left=(styleXX-1560)+"px";
  <?php 
 }
}
?>
 
</script>

I can't get it to work, the error is that the iframe keeps returning that the parents getElementByID's are empty. It doesn't seem to be able to find them. Everything else seems to work fine. It loads the iframe script properly, etc.

Also, if anyone knows of a method to put a variable in getElementByID() that IE supports. I can avoid the iframe and a php generated while. The problem with getElementByID() seems to be that the string needs to be in -> ' ' And everything in a ' ' isn't seen as a variable.

Tried everything.

getElementByID('i)

getElementByID(''+i)

i+='';
getElementByID(i)

None of it seems to work in IE. I really need to figure out a way to be able to change multiple elements in the parent frame with a single action using a loop.

**Fluf** · 06-12-2009, 07:16 AM

Can't seem to be able to edit.

I can't use a php while in the parent because the parent should not refresh by the way. So that's not a solution for me.

**wayfarer07** · 06-12-2009, 09:02 AM

Quote:

The problem with getElementByID() seems to be that the string needs to be in -> ' '

It doesn't matter, if it is in a variable. This, for example, is perfectly valid:

Code:

var str = "myId";
document.getElementById(str).style.display = "none";

Add some debugging lines into your JS to ensure that the elements actually exist and are available to you:

Code:

alert(typeof parent.document.getElementByID['<?php echo "tile".$i; ?>'])

if it alerts "undefined" there is a problem which can't be solved by looking at what you've shown us.

**Fluf** · 06-12-2009, 12:38 PM

The alert isn't doing a single thing, I'll post the full code and here's a live example.

http://rpg.fluffywolf.com/objects.php

so here's the full code. Don't mind the redundancy. It's just a pet project I work on for the past few days looking for solutions here and there and its far from final and optimized. All I am interested in right now is to be able to influence the parents img tags from within the iframe. the goleft function doesn't actually make it all go left, I've been messing about just getting it to do anything so all it should do right now is move the tiles on the right edge of the grid.

The parent window
objects.php

PHP Code:


			
<head>
<style type="text/css"> 
body{background-color:transparent;}
</style>
<script language="javascript">
function goLeft()
{
window.frames['left'].location.href='http://rpg.fluffywolf.com/load.php'
}
</script>
</head> 
<body>
<?php
$gfx="http://arcanum.fluffywolf.com/test/images/";
//Test world
$gTest=array('grass',404=>'drtgrs1',405=>'drtgrs2',406=>'drtgrs2',407=>'drtgrs3',464=>'drtgrs4',465=>'dirt',466=>'dirt',467=>'drtgrs6',524=>'drtgrs4',525=>'dirt',526=>'dirt',527=>'drtgrs6',584=>'drtgrs7',585=>'drtgrs8',586=>'drtgrs8',587=>'drtgrs9');
$at= -120; 
$al= -234; 
$pt=3500; 
$rl=60;
$lt=$pt-($rl*12)-9;
$bl=(($lt/60)-(floor($lt/60)))*60;
$br=60-$bl+1;
$pr=10;  
$i=0;   
$i_pr=-1;

while ($i<=760) {
  $i++;
  $i_pr++;
 if ($i_pr==19 and $pr%2!=0){
  $bl-=19;
  $br+=19;
  if ($br<=60 and $bl >=1) {
  $lt=$lt+($rl*17)+41;
  $ob=0;
  } else {
  $lt=$lt+($rl*17)+41;
  $ob=1;
  }
  $i_pr-=19;
  $pr++;
  $al-=1443;
  $at+=20;
 } else if ($i_pr==20 and $pr%2==0){
  $bl-=19;
  $br+=19;
  if ($br<=60 and $bl >=1) {
  $lt=$lt+($rl*17)+41;
  $ob=0;
  } else {
  $lt=$lt+($rl*17)+41;
  $ob=1;
  }
  $i_pr-=20;
  $pr++;
  $al-=1443;
  $at+=20;
 } else {
  $bl+=1;
  $br-=1;
  if (($lt-$rl+1)>0 and $br<=60) {
  $lt=$lt-$rl+1;
  $ob=0;
  } else {
  $lt=$lt-$rl+1;
  $ob=1;  
  }
  $al+=78;
 }
 if ($ob == 0) {
 ?>
 <img id="<?php echo "tile".$i; ?>" name="tile" border="no" usemap="#tileMap<?php echo $lt; ?>" style="position:absolute;top:<?php echo $at; ?>px; left:<?php echo $al; ?>px;z-index:<?php echo $pr; ?>;" src="<?php echo $gfx; ?>tiles/grass01.gif" />
 <map name="tileMap<?php echo $lt; ?>">
  <area shape="Poly" Coords="0,20,39,40,78,20,39,0" href="<?php echo $lt; ?>"> <?php /*  onMouseOver="parent.tileLoc(<?php echo $lt; ?>);" */ ?>
  <area shape="Poly" Coords="0,0,0,20,39,0" href="<?php if (($lt+$rl)>0) { echo ($lt+$rl); } ?>"> <?php /*    onMouseOver="parent.tileLoc(<?php echo ($lt+$rl); ?>);"  */ ?>
  <area shape="Poly" Coords="39,0,78,0,78,20" href="<?php if (($lt+1)>0) { echo ($lt+1); } ?>">  <?php /*    onMouseOver="parent.tileLoc(<?php echo ($lt+1); ?>);" */ ?>
  <area shape="Poly" Coords="0,20,0,40,39,40" href="<?php if (($lt-1)>0) { echo ($lt-1); } ?>"> <?php /*    onMouseOver="parent.tileLoc(<?php echo ($lt-1); ?>);" */ ?>
  <area shape="Poly" Coords="39,40,78,20,78,40" href="<?php if (($lt-$rl)>0) { echo ($lt-$rl); } ?>">  <?php /*   onMouseOver="parent.tileLoc(<?php echo ($lt-$rl); ?>);" */ ?>
 </map>
 <?php
 }
 
} ?>
<input type="button" onclick="goLeft();" value="Go Left" style="position:absolute;top:20px;left:20px;z-index:200;" />
<iframe name="left" src="" style="position:absolute; top:600px;left:40px;width:500px;height:500px;border:0px;z-index:2;"></iframe>
</body>

The page to load in the iframe on the button press.
load.php

PHP Code:


			
<head>
<?php 
$move = array ( 
 "right"  => array  ( 1=>"X",21=>"X",40=>"X",60=>"X",79=>"X",99=>"X",118=>"X",138=>"X",
      157=>"X",177=>"X",196=>"X",216=>"X",235=>"X",255=>"X",274=>"X",
      294=>"X",313=>"X",333=>"X",352=>"X",372=>"X",391=>"X",411=>"X",
      430=>"X",450=>"X",469=>"X",489=>"X",508=>"X",528=>"X",547=>"X",
      567=>"X",586=>"X",606=>"X",625=>"X",645=>"X",664=>"X",684=>"X",
      703=>"X",723=>"X",742=>"X" ),
 "left"  => array  ( 20=>"X",39=>"X",59=>"X",78=>"X",98=>"X",117=>"X",137=>"X",156=>"X",
      176=>"X",195=>"X",215=>"X",234=>"X",254=>"X",273=>"X",293=>"X",
      312=>"X",332=>"X",351=>"X",371=>"X",390=>"X",410=>"X",429=>"X",
      449=>"X",468=>"X",488=>"X",507=>"X",527=>"X",546=>"X",566=>"X",
      585=>"X",605=>"X",624=>"X",644=>"X",663=>"X",683=>"X",702=>"X",
      722=>"X",741=>"X",761=>"X" ),
 "up"  => array   ( 723=>"X",724=>"X",725=>"X",726=>"X",727=>"X",728=>"X",729=>"X",
      730=>"X",731=>"X",732=>"X",733=>"X",734=>"X",735=>"X",736=>"X",
      737=>"X",738=>"X",739=>"X",740=>"X",741=>"X",742=>"X",743=>"X",
      744=>"X",745=>"X",746=>"X",747=>"X",748=>"X",749=>"X",750=>"X",
      751=>"X",752=>"X",753=>"X",754=>"X",755=>"X",756=>"X",757=>"X",
      758=>"X",759=>"X",760=>"X",761=>"X" ),
 "down"  => array  ( 1=>"X",2=>"X",3=>"X",4=>"X",5=>"X",6=>"X",7=>"X",8=>"X",9=>"X",
      10=>"X",11=>"X",12=>"X",13=>"X",14=>"X",15=>"X",16=>"X",17=>"X",
      18=>"X",19=>"X",20=>"X",21=>"X",22=>"X",23=>"X",24=>"X",25=>"X",
      26=>"X",27=>"X",28=>"X",29=>"X",30=>"X",31=>"X",32=>"X",33=>"X",
      34=>"X",35=>"X",36=>"X",37=>"X",38=>"X",39=>"X" ),
);
?>
<script language="javascript">
function onload() { 
var styleXX;
<?php
$i=0;
while ($i<=760) {
 $i++;
 if ($move[left][$i]=="X") {
  ?>
  alert(typeof parent.document.getElementByID['<?php echo "tile".$i; ?>']);
  styleXX=parent.document.getElementByID['<?php echo "tile".$i; ?>'].style.left.replace(/px/g,"");
  parent.document.getElementByID['<?php echo "tile".$i; ?>'].style.left=(styleXX-1560)+"px";
  <?php 
 }
}
?>
}
</script>
</head>
<body onload="onload();">
</body>

**wayfarer07** · 06-12-2009, 12:53 PM

If it isn't alerting at all, it is never executing. Is it being outputted by your PHP code? I notice it is inside of an "if". Is it actually in the static HTML?

**Fluf** · 06-12-2009, 12:58 PM

yeah, look at the source in the example on the iframe. It prints it all in an body onload function and executes it. IE even get to the first line that involves getElementID in attempts to execute it (the alert in this case) but according to IE errors it's empty or doesn't exist. But I don't understand why. :P

I seens examples using this that do work.

Anyhow, the php all seems to be fine, the pages are constructed properly and source of the page online all add up just right. But it's just not working.

**Fluf** · 06-12-2009, 01:10 PM

Also, all the tile numbers it checks in load.php through the array are all present in the objects.php html.

But for some reason the parent. isn't finding its target.

**wayfarer07** · 06-12-2009, 03:53 PM

What is this:

Quote:

Why doesn't the IFRAME have a src?

**Fluf** · 05:15 PM

It should only load when the button is clicked. But I have tried inputting the source of the page there as well. No difference however. Either way, when opening the parent page, the iframe should initially be empty.

When the button is clicked (the js function executed) it should load the iframe with a php generated javascript function that executes once the html in the iframe is loaded (with onload) that changes the style.top/left of id'd images that exist in the parent page.

And like I said, the parent page shouldn't be refreshed, and for my intentions to work in theory, I need to put a variable in getElementByID that seems to only work in IE if I do it through a php echo, hence I do the loop in php instead of javascript. And because php is server side, and I dont want to refresh the main page. I need to use an iframe that can be refreshed instead. Even though I tried both php/js and a pure js method, but couldn't get either to work.

I tried everything that I can think off. Somehow, I can't get it to work that javascript inside the iframe's page is able to change an image element that exist in the parent frame.

I can do parent to iframe movement, but for the purpose of my project that won't work. But I can't get iframe to parent to work.

As far as I know, there is an inbuilt security on parent that it won't work cross domain. But my pages are both on the same domain.

Could the problem be my server?

**Fluf** · 06-12-2009, 05:05 PM

As for my project, im researching solutions to build an extensive javascript isometric game engine. The purpose of this particular bit is to eventually load tiles in the direction of movement by switching the tile on the other edge to the front edge with the proper new information. So the engine only has to load a very small portion of the isometric map. And the only way I can think off without needing to refresh the screen, is through iframe to parent communication.

(Think diablo or arcanum style.)

**wayfarer07** · 06-13-2009, 09:27 AM

Quote:

But my pages are both on the same domain.

Are they on a different SUB domain?

**Fluf** · 06-13-2009, 10:40 AM

I just found the problem, and it is really silly.

I typed getElementByID but it should be getElementById

..lol, I feel so silly right now.

**wayfarer07** · 06-13-2009, 11:12 AM

lol.... was wondering what the heck was going on...

Always the simple stuff, isn't it?

**Fluf** · 06-13-2009, 11:17 AM

I checked the code many times, but just kept looking over it. Very annoying. :P

The script works fine now.

**wayfarer07** · 06-13-2009, 11:39 AM

I didn't catch it either, even when I copied the bad piece of code to make this suggestion:

Quote:

Originally Posted by wayfarer07

Code:

alert(typeof parent.document.getElementByID['<?php echo "tile".$i; ?>'])

if it alerts "undefined" there is a problem which can't be solved by looking at what you've shown us.