Safari Compatibility issue with dynamic population of Selects

JavaScript
1

Anyone have any issues with Safari in relation to javascript compatibility?

I have a page that loads dynamically through user selections as follows:

There is a set of three radio buttons. The user selects one and a div opens revealing a select box populated with entries related to the radio button selection.

When the user makes a selection from the select box, one of two things happen. 1) If there are child records relating to their selection, a second div opens revealing another select box containing the child entries relating to the first select box choice. Or 2) if there are no child entries relating to the selection in the first select box, a div opens displaying a description relating to the selection they made in the first select box.

The data is all coming from prepopulated javascript arrays.

This works like a dream in IE and Chrome. Unfortunately, when we were in the final stages of testing before release to a live environment, we discovered it works in Safari only as far as the user makes a selection from the three radio buttons driving the opening of the first div layer containing the first select. At this point it stops working completely.

On top of that, I can not find where in the latest release of Safari, that I can see any javascript errors (or if I even can). I am REALLY in need of help. Anything you can offer?

Thanks!!

Dmxsmith

2

Here is the code, hopefully it makes sense. The first piece here is from the <head> section in a Coldfusion page:


<script language='JavaScript'>
	var arrFormat = new Array();
	var arrProduct = new Array();
	var arrSubstrate = new Array();
		
	<cfset Variables.JSLoop = 0>
	<cfoutput>
    	<cfloop query='qryFormat'>
        	arrFormat[#Variables.JSLoop#] = new Array('#qryFormat.pk_reference_id#', '#qryFormat.Reference_main#');
            <cfset Variables.JSLoop = Variables.JSLoop + 1>
        </cfloop>
	</cfoutput>
	
	<cfset Variables.JSLoop = 0>
	        
	<cfoutput>
    	<cfloop query='qryProduct'>
        	arrProduct[#Variables.JSLoop#] = new Array('#qryProduct.pk_reference_id#', '#qryProduct.Reference_main#', '#qryProduct.fk_cat_reference_id#', '#qryProduct.reference_desc_1#', '#qryProduct.reference_desc_2#', '#qryProduct.reference_desc_3#', '#qryProduct.reference_desc_4#', '#qryProduct.reference_desc_5#', '#qryProduct.reference_desc_6#', '#qryProduct.reference_desc_7#', '#qryProduct.reference_desc_8#');
            <cfset Variables.JSLoop = Variables.JSLoop + 1>
        </cfloop>
	</cfoutput>
	
	<cfset Variables.JSLoop = 0>
	        
	<cfoutput>
    	<cfloop query='qrySubstrate'>
        	arrSubstrate[#Variables.JSLoop#] = new Array('#qrySubstrate.pk_reference_id#', '#qrySubstrate.Reference_main#', '#qrySubstrate.fk_cat_reference_id#', '#qrySubstrate.reference_desc_1#', '#qrySubstrate.reference_desc_2#', '#qrySubstrate.reference_desc_3#', '#qrySubstrate.reference_desc_4#', '#qrySubstrate.reference_desc_5#', '#qrySubstrate.reference_desc_6#', '#qrySubstrate.reference_desc_7#', '#qrySubstrate.reference_desc_8#');
            <cfset Variables.JSLoop = Variables.JSLoop + 1>
        </cfloop>
	</cfoutput>
</script>

The arrays above are being populated from Coldfusion queries. This code works 100% in all browsers as it is all run at the server.

Here is the function that I referred to in my initial post. It runs through great when the initial radio button (called format) is clicked therefore launching this function:


function alterProdList(ProdList) {
	var i; var chkCty = ''; var intFormat;
	document.getElementById('vectorimage').style.display = "none";
	
	if (ProdList == 1) 
	{
		document.getElementById('div_product').style.display = "block";
		
		if (document.orderitems.format[0].checked) {
			intFormat = 25;	
			document.getElementById('SpecialFinishing').style.display = "block";
		}
		else if (document.orderitems.format[1].checked)
		{
			intFormat = 26;
			document.getElementById('SpecialFinishing').style.display = "none";
		}
		else if (document.orderitems.format[2].checked)
		{
			intFormat = 27;
			document.getElementById('SpecialFinishing').style.display = "none";
		}
	
		document.orderitems.product.options.length=0;
						
		for (i = 0; i < arrProduct.length; i++) 
		{
			if ((arrProduct[i][2] == intFormat) && (chkCty.lastIndexOf(arrProduct[i][0] == -1)))
			{ 
				document.orderitems.product.options[document.orderitems.product.length] = new Option(arrProduct[i][1], arrProduct[i][0]);
				chkCty = chkCty + ',' + arrProduct[i][0];
			}
		}
		alterProdList(2);
	}
	else if (ProdList == 2)	
	{
		var intCnt = 0;
		var intProdSize = 0;
		var intProdDesc = 0;
		var intProdBImage = 0;
		var intProdVImage = 0;
						
		for (i = 0; i < arrSubstrate.length; i++) 
		{
			if ((arrSubstrate[i][2] == document.orderitems.product.options[document.orderitems.product.selectedIndex].value) && (chkCty.lastIndexOf(arrSubstrate[i][0] == -1)))
			{ 
				if (intCnt == 0)
				{
					document.getElementById('div_substrate').style.display = "block";
					document.orderitems.substrate.options.length = 0;
					intCnt = 1;
				}
				document.orderitems.substrate.options[document.orderitems.substrate.length] = new Option(arrSubstrate[i][1], arrSubstrate[i][0]);
				chkCty = chkCty + ',' + arrSubstrate[i][0];
			}
		}

		document.getElementById('div_stickers').style.display = "none";
		
		if (intCnt == 0)
		{
			if (document.orderitems.product.options[document.orderitems.product.selectedIndex].value == '57') 
			{
				document.getElementById('div_stickers').style.display = "block";
				document.orderitems.substrate.options.length = 0;
				document.getElementById('div_substrate').style.display = "none";
				document.getElementById('backimage').style.display = "none";
			}
			else
			{
				document.orderitems.substrate.options.length = 0;
				document.getElementById('div_substrate').style.display = "none";
				document.getElementById('div_stickers').style.display = "none";
			}
		}
		
		for (i = 0; i < arrProduct.length; i++) 
		{
			if ((arrProduct[i][0] == document.orderitems.product.options[document.orderitems.product.selectedIndex].value) && (chkCty.lastIndexOf(arrProduct[i][0] == -1)))
			{ 
				if (arrProduct[i][3] != '')
				{
					document.getElementById('swide').value = arrProduct[i][3];
					if (arrProduct[i][6] == '2')
					{
						document.getElementById('swide').style.display = 'block';
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=true;	
					}
					else if (arrProduct[i][6] == '1')
					{
						document.getElementById('swide').style.display = 'block';	
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=false;
					}
					else if (arrProduct[i][6] == '0')
					{
						document.getElementById('swide').style.display = 'none';	
						document.getElementById('lswide').style.display = 'none';
					}
					else
					{
						document.getElementById('swide').style.display = 'block';
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=false;
					}
					intProdSize = 1;
				}
				else
				{
					document.getElementById('swide').value = '';
					if (arrProduct[i][6] == '2')
					{
						document.getElementById('swide').style.display = 'block';
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=true;	
					}
					else if (arrProduct[i][6] == '1')
					{
						document.getElementById('swide').style.display = 'block';	
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=false;
					}
					else if (arrProduct[i][6] == '0')
					{
						document.getElementById('swide').style.display = 'none';	
						document.getElementById('lswide').style.display = 'none';
					}
					else
					{
						document.getElementById('swide').style.display = 'block';
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=false;
					}
				}
				if (arrProduct[i][4] != '')
				{
					document.getElementById('stall').value = arrProduct[i][4];
					if (arrProduct[i][6] == '2')
					{
						document.getElementById('stall').style.display = 'block';
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=true;	
					}
					else if (arrProduct[i][6] == '1')
					{
						document.getElementById('stall').style.display = 'block';	
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=false;
					}
					else if (arrProduct[i][6] == '0')
					{
						document.getElementById('stall').style.display = 'none';	
						document.getElementById('lstall').style.display = 'none';
					}
					else
					{
						document.getElementById('stall').style.display = 'block';
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=false;
					}
					intProdSize = 1;
				}
				else
				{
					document.getElementById('stall').value = '';
					if (arrProduct[i][6] == '2')
					{
						document.getElementById('stall').style.display = 'block';
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=true;	
					}
					else if (arrProduct[i][6] == '1')
					{
						document.getElementById('stall').style.display = 'block';	
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=false;
					}
					else if (arrProduct[i][6] == '0')
					{
						document.getElementById('stall').style.display = 'none';	
						document.getElementById('lstall').style.display = 'none';
					}
					else
					{
						document.getElementById('stall').style.display = 'block';
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=false;
					}
				}
				if (arrProduct[i][7] != '')
				{
					document.getElementById("proddesc").innerHTML = '<b><u>' + arrProduct[i][1] + '</u></b><br />' + arrProduct[i][7];
					document.getElementById("proddesc").style.display = "block";
					intProdDesc = 1;
				}
				else
				{
					document.getElementById("proddesc").innerHTML = '';
					document.getElementById("proddesc").style.display = "none";
				}
				if (arrProduct[i][8] == '1')
				{
					document.getElementById("backimage").style.display = "none";
					intProdBImage = 1;
				}
				else
				{
					document.getElementById("backimage").style.display = "block";
				}
				if (arrProduct[i][9] != '1')
				{
					document.getElementById("vectorimage").style.display = "none";
					intProdVImage = 1;
				}
				else
				{
					document.getElementById("vectorimage").style.display = "block";
				}
				
				chkCty = chkCty + ',' + arrProduct[i][0];
			}
		}

		if (intCnt == 1)
		{
			alterProdList(3);
		}
	}
	else if (ProdList == 3)
	{
		for (i = 0; i < arrSubstrate.length; i++) 
		{
			if ((arrSubstrate[i][0] == document.orderitems.substrate.options[document.orderitems.substrate.selectedIndex].value) && (chkCty.lastIndexOf(arrSubstrate[i][0] == -1)))
			{ 
				if (arrSubstrate[i][3] != '')
				{
					document.getElementById('swide').value = arrSubstrate[i][3];
					if (arrSubstrate[i][6] == '2')
					{
						document.getElementById('swide').style.display = 'block';
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=true;
					}
					else if (arrSubstrate[i][6] == '1')
					{
						document.getElementById('swide').style.display = 'block';	
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=false;
					}
					else if (arrSubstrate[i][6] == '0')
					{
						document.getElementById('swide').style.display = 'none';	
						document.getElementById('lswide').style.display = 'none';
					}
					else
					{
						document.getElementById('swide').style.display = 'block';
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=false;
					}
				}
				else if (intProdSize == 0)
				{
					document.getElementById('swide').value = '';
					if (arrSubstrate[i][6] == '2')
					{
						document.getElementById('swide').style.display = 'block';
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=true;
					}
					else if (arrSubstrate[i][6] == '1')
					{
						document.getElementById('swide').style.display = 'block';	
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=false;
					}
					else if (arrSubstrate[i][6] == '0')
					{
						document.getElementById('swide').style.display = 'none';	
						document.getElementById('lswide').style.display = 'none';
					}
					else
					{
						document.getElementById('swide').style.display = 'block';
						document.getElementById('lswide').style.display = 'block';
						document.getElementById('swide').disabled=false;
					}
				}
				if (arrSubstrate[i][4] != '')
				{
					document.getElementById('stall').value = arrSubstrate[i][4];
					if (arrSubstrate[i][6] == '2')
					{
						document.getElementById('stall').style.display = 'block';
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=true;	
					}
					else if (arrSubstrate[i][6] == '1')
					{
						document.getElementById('stall').style.display = 'block';	
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=false;
					}
					else if (arrSubstrate[i][6] == '0')
					{
						document.getElementById('stall').style.display = 'none';	
						document.getElementById('lstall').style.display = 'none';
					}
					else
					{
						document.getElementById('stall').style.display = 'block';
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=false;
					}
				}
				else if (intProdSize == 0)
				{
					document.getElementById('stall').value = '';
					if (arrSubstrate[i][6] == '2')
					{
						document.getElementById('stall').style.display = 'block';
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=true;	
					}
					else if (arrSubstrate[i][6] == '1')
					{
						document.getElementById('stall').style.display = 'block';	
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=false;
					}
					else if (arrSubstrate[i][6] == '0')
					{
						document.getElementById('stall').style.display = 'none';	
						document.getElementById('lstall').style.display = 'none';
					}
					else
					{
						document.getElementById('stall').style.display = 'block';
						document.getElementById('lstall').style.display = 'block';
						document.getElementById('stall').disabled=false;
					}
				}
				if (arrSubstrate[i][7] != '')
				{
					document.getElementById("proddesc").innerHTML = '<b><u>' + arrSubstrate[i][1] + '</u></b><br />' + arrSubstrate[i][7];
					document.getElementById("proddesc").style.display = "block";
				}
				else if (intProdDesc == 0)
				{
					document.getElementById("proddesc").innerHTML = '';
					document.getElementById("proddesc").style.display = "none";
				}
				if (arrSubstrate[i][8] == '1')
				{
					document.getElementById("backimage").style.display = "none";
				}
				else if (intProdBImage == 0)
				{
					document.getElementById("backimage").style.display = "block";
				}
				if (arrSubstrate[i][9] != '1')
				{
					document.getElementById("vectorimage").style.display = "none";
				}
				else if (intProdVImage == 0)
				{
					document.getElementById("vectorimage").style.display = "block";
				}
					
				chkCty = chkCty + ',' + arrSubstrate[i][0];
			}
		}
	}
	
	document.getElementById('startTip').innerHTML = "<a href='javascript:removeProduct();'>X Remove From Order</a>";
	document.getElementById('startTip').className = "";
	
	if (testIsValidObject(document.getElementById('overimg')))
	{
		document.getElementById('overimg').style.width = "0px";
		document.getElementById('overimg').style.height = "0px";
		document.getElementById('divRestrict').className = "";
	}
}

And finally, here is the initial select box as it sits in the HTML:


<select name="product" id="product" class="validate-selection" title="Please select a product." onClick="javascript:alterProdList(2)">
	<option value=""></option>
</select>
3

No matter into how many different forums you dump this question, the answer must be the same: Show the code.