/    Sign up×
Community /Pin to ProfileBookmark

Safari Compatibility issue, please help!

Copy linkTweet thisAlerts:
Sep 30.2010

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

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sterling_IsfineSep 30.2010 — You need to post all the involved code or preferably a URL, since the script will almost certainly need to be run to diagnose it.
Copy linkTweet thisAlerts:
@dmxsmithauthorSep 30.2010 — Here is the code, hopefully it makes sense. The first piece here is from the <head> section in a Coldfusion page:

[CODE]
<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>
[/CODE]

The arrays above are being populated from Coldfusion queries. This code works 100% in all browsers as it is all run at the server.
Copy linkTweet thisAlerts:
@dmxsmithauthorSep 30.2010 — 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:

[CODE]
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);
}
}
[/CODE]
Copy linkTweet thisAlerts:
@dmxsmithauthorSep 30.2010 — Here is the rest that would not fit in the previous post:

[CODE]
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 = "";
}
}
[/CODE]

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

[CODE]
<select name="product" id="product" class="validate-selection" title="Please select a product." onClick="javascript:alterProdList(2)">
<option value=""></option>
</select>
[/CODE]
Copy linkTweet thisAlerts:
@KorOct 01.2010 — <i>
</i>&lt;select name="product" id="product" class="validate-selection" title="Please select a product." [COLOR="Blue"]onchange="alterProdList(2)"[/COLOR]&gt;
×

Success!

Help @dmxsmith spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.10,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...