www.webdeveloper.com
Results 1 to 4 of 4

Thread: Code works in Firefox but not in IE

Threaded 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

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