www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Referencing identical id's in nested iFrames

Hybrid View

  1. #1
    Join Date
    Jul 2010
    Posts
    34

    resolved [RESOLVED] Referencing identical id's in nested iFrames

    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)
    HTML Code:
    <!-- 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?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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:
    Code:
    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
    Last edited by Kor; 08-03-2010 at 05:03 AM.

  3. #3
    Join Date
    Jul 2010
    Posts
    34
    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.

    HTML Code:
    // 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.

    PHP Code:

    // 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.

    HTML Code:
    // 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;
    	}
    	
    }
    Last edited by Errant_Shadow; 08-04-2010 at 04:20 AM. Reason: Forgot some details

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles