www.webdeveloper.com
Results 1 to 4 of 4

Thread: Code works in Firefox but not in IE

Hybrid View

  1. #1
    Join Date
    Jun 2007
    Posts
    73

    Code works in Firefox but not in IE

    Hi,

    I have created the following script which allows nested 'checkbox' selection. However, whilst it works perfectly in Firefox, it does not work correctly in IE.

    When I select 'All Categories' all the 'checkboxes' are selected (this is what should happen) but if I select it again nothing happens (it should unselect all 'checkboxes'). No errors are given.

    Please find my code below and example.zip attached which contains my source and the necessary images:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    	var selectedCategories = '';
    	var flag = false;
    	var categories=[['id00001',''],['id00002','id00001'],['id00003','id00001'],['id00004','id00003'],['id00005','id00003'],['id00006','id00003'],['id00007','id00003'],['id00008','id00001'],['id00009','id00001'],['id00010','id00001']];
    
    	function category(id)
    	{
    		if(document.getElementById(id).getAttribute('src') != 'on.png')
    		{
    			document.getElementById(id).setAttribute('src','on.png');
    			selectedCategories = selectedCategories + ',' + id;
    			selectChild(id);
    			selectParent(id);
    		}
    		else
    		{
    			document.getElementById(id).setAttribute('src','off.png');
    			selectedCategories = selectedCategories.replace(',' + id,'');
    			unselectChild(id);
    			unselectParent(id);
    		}
    	}
    
    	function getChild(id)
    	{
    		var children = '';
    		for(var x = 0; x < categories.length; x++)
    		{
    			if(categories[x][1] == id)
    			{
    				if(children == '')
    				{
    					children = children + categories[x][0];
    				}
    				else
    				{
    					children = children + ',' + categories[x][0];
    				}
    			}
    		}
    		return children;
    	}
    
    	function getParent(id)
    	{
    		var parent = '';
    		for(var x = 0; x < categories.length; x++)
    		{
    			if(categories[x][0] == id)
    			{
    				parent = categories[x][1];
    			}
    		}
    		return parent;
    	}
    
    	function selectChild(id)
    	{
    		if(getChild(id) != '')
    		{
    			var children = getChild(id).split(',');
    			for(var x = 0; x < children.length; x++)
    			{
    				document.getElementById(children[x]).setAttribute('src','on.png');
    				selectedCategories = selectedCategories + ',' + children[x];
    				selectChild(children[x]);
    			}
    		}
    	}
    
    	function selectParent(id)
    	{
    		if(getParent(id) != '')
    		{
    			var parent = getParent(id);
    			var children = getChild(parent).split(',');
    			var flag = true;
    			for(var x = 0; x < children.length; x++)
    			{
    				if(document.getElementById(children[x]).getAttribute('src') != 'on.png')
    				{
    					flag = false;
    				}
    			}
    			if(flag)
    			{
    				document.getElementById(parent).setAttribute('src','on.png');
    			}
    			else
    			{
    				document.getElementById(parent).setAttribute('src','part.png');
    			}
    			selectedCategories = selectedCategories + ',' + parent;
    			selectParent(parent);
    		}
    	}
    
    	function unselectChild(id)
    	{
    		if(getChild(id) != '')
    		{
    			var children = getChild(id).split(',');
    			for(var x = 0; x < children.length; x++)
    			{
    				document.getElementById(children[x]).setAttribute('src','off.png');
    				selectedCategories = selectedCategories.replace(',' + children[x],'');
    				unselectChild(children[x]);
    			}
    		}
    	}
    
    	function unselectParent(id)
    	{
    		if(getParent(id) != '')
    		{
    			var parent = getParent(id);
    			var children = getChild(parent).split(',');
    			var flag = false;
    			for(var x = 0; x < children.length; x++)
    			{
    				if(document.getElementById(children[x]).getAttribute('src') != 'off.png')
    				{
    					flag = true;
    				}
    			}
    			if(!flag)
    			{
    				document.getElementById(parent).setAttribute('src','off.png');
    			}
    			else
    			{
    				document.getElementById(parent).setAttribute('src','part.png');
    			}
    			selectedCategories = selectedCategories.replace(',' + parent,'');
    			unselectParent(parent);
    		}
    	}
    </script>
    </head>
    <body>
    <ul>
    	<li>All Categories <img id="id00001" src="off.png" onClick="category('id00001');"></li>
    	<ul>
    		<li>Electronics <img id="id00002" src="off.png" onClick="category('id00002');"></li>
    		<li>Gaming <img id="id00003" src="off.png" onClick="category('id00003');"></li>
    		<ul>
    			<li>PS3 <img id="id00004" src="off.png" onClick="category('id00004');"></li>
    			<li>Xbox 360 <img id="id00005" src="off.png" onClick="category('id00005');"></li>
    			<li>Wii <img id="id00006" src="off.png" onClick="category('id00006');"></li>
    			<li>PC <img id="id00007" src="off.png" onClick="category('id00007');"></li>
    		</ul>
    		<li>Audio <img id="id00008" src="off.png" onClick="category('id00008');"></li>
    		<li>Motoring <img id="id00009" src="off.png" onClick="category('id00009');"></li>
    		<li>Books <img id="id00010" src="off.png" onClick="category('id00010');"></li>
    	</ul>
    </ul>
    </body>
    </html>
    Attached Files Attached Files

  2. #2
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    The problem was with these lines:
    if(document.getElementById(id).getAttribute('src') != 'on.png')
    When testing locally, IE actually sees the src as being something more like: file:///C:/users/yourname/yourfolder/on.png or something to that effect.

    See my comments in code where I made changes in 3 locations:

    Code:
    <script type="text/javascript">
    	var selectedCategories = '';
    	var flag = false;
    	var categories=[
    		['id00001',''],
    		['id00002','id00001'],
    		['id00003','id00001'],
    		['id00004','id00003'],
    		['id00005','id00003'],
    		['id00006','id00003'],
    		['id00007','id00003'],
    		['id00008','id00001'],
    		['id00009','id00001'],
    		['id00010','id00001']
    	];
    
    	function category(id)
    	{
    		var elem = document.getElementById(id); //added this line in
    		if(elem.src.match(/^(.*)on\.png$/) === null) //changed this to not match string ending with 'on.png' (use === null in this case is necessary)
    		{
    			elem.setAttribute('src','on.png');
    			selectedCategories = selectedCategories + ',' + id;
    			selectChild(id);
    			selectParent(id);
    		}
    		else
    		{
    			elem.setAttribute('src','off.png');
    			selectedCategories = selectedCategories.replace(',' + id,'');
    			unselectChild(id);
    			unselectParent(id);
    		}
    	}
    
    	function getChild(id)
    	{
    		var children = '';
    		for(var x = 0; x < categories.length; x++)
    		{
    			if(categories[x][1] == id)
    			{
    				if(children == '')
    				{
    					children = children + categories[x][0];
    				}
    				else
    				{
    					children = children + ',' + categories[x][0];
    				}
    			}
    		}
    		return children;
    	}
    
    	function getParent(id)
    	{
    		var parent = '';
    		for(var x = 0; x < categories.length; x++)
    		{
    			if(categories[x][0] == id)
    			{
    				parent = categories[x][1];
    			}
    		}
    		return parent;
    	}
    
    	function selectChild(id)
    	{
    		if(getChild(id) != '')
    		{
    			var children = getChild(id).split(',');
    			for(var x = 0; x < children.length; x++)
    			{
    				document.getElementById(children[x]).setAttribute('src','on.png');
    				selectedCategories = selectedCategories + ',' + children[x];
    				selectChild(children[x]);
    			}
    		}
    	}
    
    	function selectParent(id)
    	{
    		if(getParent(id) != '')
    		{
    			var parent = getParent(id);
    			var children = getChild(parent).split(',');
    			var flag = true;
    			for(var x = 0; x < children.length; x++)
    			{
    				var childEl = document.getElementById(children[x]); //added this line in
    				if(childEl.src.match(/^(.*)on\.png$/) === null) //changed this to not match string ending with 'on.png'
    				{
    					flag = false;
    				}
    			}
    			if(flag)
    			{
    				document.getElementById(parent).setAttribute('src','on.png');
    			}
    			else
    			{
    				document.getElementById(parent).setAttribute('src','part.png');
    			}
    			selectedCategories = selectedCategories + ',' + parent;
    			selectParent(parent);
    		}
    	}
    
    	function unselectChild(id)
    	{
    		if(getChild(id) != '')
    		{
    			var children = getChild(id).split(',');
    			for(var x = 0; x < children.length; x++)
    			{
    				document.getElementById(children[x]).setAttribute('src','off.png');
    				selectedCategories = selectedCategories.replace(',' + children[x],'');
    				unselectChild(children[x]);
    			}
    		}
    	}
    
    	function unselectParent(id)
    	{
    		if(getParent(id) != '')
    		{
    			var parent = getParent(id);
    			var children = getChild(parent).split(',');
    			var flag = false;
    			for(var x = 0; x < children.length; x++)
    			{
    				var childEl = document.getElementById(children[x]); //added this line in
    				if(childEl.src.match(/^(.*)off\.png$/) === null) //changed this to not match string ending with 'off.png'
    				{
    					flag = true;
    				}
    			}
    			if(!flag)
    			{
    				document.getElementById(parent).setAttribute('src','off.png');
    			}
    			else
    			{
    				document.getElementById(parent).setAttribute('src','part.png');
    			}
    			selectedCategories = selectedCategories.replace(',' + parent,'');
    			unselectParent(parent);
    		}
    	}
    </script>

  3. #3
    Join Date
    Jun 2007
    Posts
    73

    Thumbs up Resolved

    That's great... works perfectly. Thank you for all your help.

  4. #4
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    You are welcome! And thanks for the zip - it's great when people give you the proper tools to help them! (was easier to debug, having images and not having to use my own)

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