[RESOLVED] Referencing identical id's in nested iFrames

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] Referencing identical id's in nested iFrames

Errant_Shadow

Here's my problem:

I have groups of elements that are scattered around my page but have identical id's so that I can reference them all at once (as a group).

These elements are sitting inside of an iFrame, that is sitting inside another iFrame (that is building a nested navigation bar).

So what I want to do is have a script sitting in the top document that when a button is pressed it will reference those double-nested identical id's and toggle their display.

and this is what I have so far...
(while testing, I do not have any identical id's)

<!-- my buttons -->
<form>
	<input type="checkbox" name="DTS" onclick="toggleFilter(\'DTS\', this.checked);" checked /> Toggle DTS Numbers |
	<input type="checkbox" name="DCS" onclick="toggleFilter(\'DCS\', this.checked);" checked /> Toggle DCS Numbers |
	<input type="checkbox" name="IGT" onclick="toggleFilter(\'IGT\', this.checked);" checked /> Toggle IGT Numbers
</form>

<!-- my script -->
<script type="text/javascript">
<!--

function toggleFilter(myElement, myChecked)
{
	alert("toggleFilter("+ myElement +","+ myChecked +")");

	var toggle =(myChecked == true)? "block" : "none";
	alert("toggle = "+ toggle);

	var myDIV = document.frames["parentFrame"].document.frames["bodyFrame"].document.getElementById("272");
	alert("myDIV = "+ myDIV);

	myDIV.style.display = toggle;

	alert(myDIV +".style.display = "+ toggle);
}

 -->
</script>

Now, as you can see, I have alert boxes tracing debug information for me. So when I hit the check boxes, both the 1st and 2nd alert box trigger, but the 3rd does not, so I know the error is hitting at myDIV's definition.

I looked at a bunch of sites and this was the best I could devise for how to do it, but it's obviously not working.

Any advise?

Kor

You can not have identical id's on a document. It is HTML/CSS and JavaScript illegal. The id must be unique on document/session. That is why it is called ID

Moreover, the id and name tokens can not start with a digit. The first character must be a letter.

So, find another way to refer those elements. Give them a common CSS class, maybe, and use something like:

onload=function (){
if (!document.getElementsByClassName) {
	document.getElementsByClassName = function (cn) { 
		var rx = new RegExp("(?:^|\\s)" + cn+ "(?:$|\\s)");
		var allT = document.getElementsByTagName("*"), allCN = [], ac="", i = 0, a;
			while (a = allT[i=i+1]) {
			  ac=a.className;
			  if ( ac && ac.indexOf(cn) !==-1) {
				if(ac===cn){ allCN[allCN.length] = a; continue;   }
				rx.test(ac) ? (allCN[allCN.length] = a) : 0;
			  }
			}
		return allCN;
	}
}
}

now document.getElementsByClassName() will refer all the elements with the same class

Errant_Shadow

Unfortunately, the getElementsByClassName method is not working for me; installing the function simply broke my entire script.

On the other hand, I have in fact devised a solution for my problem; which is three-fold.

First, properly targeting the elements within my nested iFrames. After research and much experimentation I've found the correct syntax; or at least a syntax that works for me in my browser.


// This MUST target the contentWindow of the iFrame
var myParentFrame	= document.getElementById("parentFrame").contentWindow;

// THEN that content window's document
var myBodyFrame		= myParentFrame.document.getElementById("bodyFrame").contentWindow;

// Finally, I grab all TR tags in my table and save them for later...
var myDocument		= myBodyFrame.document.getElementsByTagName("tr");

Once that was out of the way, I needed a solution to making identical id tags, which is illegal by standards. My solution is to use regular expressions to generate tags that start with the same string and end with unique identifiers and assign those id's to the TR elements of my table.


// for this, I use an associative array where each pattern looks for the match to BEGIN with a specific string
$patterns = array("DTS" => '/^DTS/', "DCS" => '/^DCS/', "IGT" => '/^[0-9]/');
foreach ($patterns as $prefix => $pattern)
{
	// then, when it finds the match, it creates the appropriate id tag
	$content.=(preg_match($pattern,$row['serialno']))? 'id="'. $prefix .'-'. $row['tableid'] .'" ' : ' ';
}

Finally, I need my javascript to do the same thing and search each element in my nested iFrame for a match to that pattern. To do this, I define the RegExp object using data passed from the function call (such as "^DTS"). Then check each TR element that I gathered earlier for the pattern using the RegExp.text() method.


// pass function arguement to RegExp object
var myRegExp = new RegExp(regexp);

// loop through each tr element
for (var i = 0; i < myDocument.length; i++)
{
	if (myRegExp.test(myDocument[i].id) == true)
	{
		myDocument[i].style.display = toggle;
	}

}