asked on

javascript show/hide problem with firefox

Hello,

I am having trouble with some Javascript in Firefox 3.0.3. It seems to work just fine in IE7, Opera 9.5, and Chrome, but not in FF. Basically I have 3 dropdowns, with the 1st dropdown determining the values for the 2nd and 3rd dropdown. There are only two possible selections from the 1st dropdown, so the way I have done this is to actually have 5 dropdowns:

1. First dropdown with two options, option A and option B
2. First dropdown for option A
3. First dropdown for option A (hidden)
4. Second dropdown for option B
5. Second dropdown for option B (hidden)

Then, if the user changes from option A to option B, dropdowns 2 & 4 are hidden and 3 & 5 become visible, and vice versa for when the user changes back to option A.

Can anyone explain why it doesn't behave in FF? Live example can be found here:
http://www.aspyre.com.au/TimetableQuery.aspx
http://www.aspyre.com.au/DropDown.js

Thanks.

function SummerRoute_OnChange()
{
    if(document.TimetableQuery.drpRouteSummer.value == '0')
    {
        document.TimetableQuery.drpFromSummer.options(0).text = '-- Please Select Route --';
        document.TimetableQuery.drpToSummer.options(0).text = '-- Please Select Route --';
        document.TimetableQuery.drpFromSummer.disabled=true;
        document.TimetableQuery.drpToSummer.disabled=true;
        document.TimetableQuery.drpFromSummer.value = 0;
        document.TimetableQuery.drpToSummer.value = 0;
        ShowDropDowns(true);
    }
    if(document.TimetableQuery.drpRouteSummer.value == '1')
    {
        ShowDropDowns(false);
    }
    if(document.TimetableQuery.drpRouteSummer.value == '3')
    {
        document.TimetableQuery.drpFromSummer.options(0).text = '-- Please Select --';
        document.TimetableQuery.drpToSummer.options(0).text = '-- Please Select --';
        document.TimetableQuery.drpFromSummer.disabled=false;
        document.TimetableQuery.drpToSummer.disabled=false;
        ShowDropDowns(true);
    }
}
 
function SummerRoute_OnChange_OLD()
{
    removeAllOptions(document.TimetableQuery.drpFrom);
    removeAllOptions(document.TimetableQuery.drpTo);
 
    if(document.TimetableQuery.drpRouteSummer.value == '0')
    {
        addOption(document.TimetableQuery.drpFrom, '0', '-- Please Select Route --');
        addOption(document.TimetableQuery.drpTo, '0', '-- Please Select Route --');
        document.TimetableQuery.drpFrom.disabled=true;
        document.TimetableQuery.drpTo.disabled=true;
    }
    if(document.TimetableQuery.drpRouteSummer.value == '1')
    {
        LoadRegularStops(document.TimetableQuery.drpFrom);
        LoadRegularStops(document.TimetableQuery.drpTo);
        document.TimetableQuery.drpFrom.disabled = false;
        document.TimetableQuery.drpTo.disabled = false;
    }
    if(document.TimetableQuery.drpRouteSummer.value == '3')
    {
        LoadSummerStops(document.TimetableQuery.drpFrom);
        LoadSummerStops(document.TimetableQuery.drpTo);
        document.TimetableQuery.drpFrom.disabled = false;
        document.TimetableQuery.drpTo.disabled = false;
    }
}
 
function ShowDropDowns(IsSummer)
{
    if(IsSummer)
    {
        if (document.getElementById)
        {
            document.getElementById('divFromSummer').style.visibility='visible';
            document.getElementById('divToSummer').style.visibility='visible';
            document.getElementById('divFromRegular').style.visibility='hidden';
            document.getElementById('divToRegular').style.visibility='hidden';
            document.getElementById('divFromSummer').style.display='block';
            document.getElementById('divToSummer').style.display='block';
            document.getElementById('divFromRegular').style.display='none';
            document.getElementById('divToRegular').style.display='none';
        }
        else{
            if (document.layers)
            {
                document.divFromSummer.visibility='visible';
                document.divToSummer.visibility='visible';
                document.divFromRegular.visibility='hidden';
                document.divToRegular.visibility='hidden';
                document.divFromSummer.display='block';
                document.divToSummer.display='block';
                document.divFromRegular.display='none';
                document.divToRegular.display='none';
            }
            else{
                 document.all.divFromSummer.visibility='visible';
                 document.all.divToSummer.visibility='visible';
                 document.all.divFromRegular.visibility='hidden';
                 document.all.divToRegular.visibility='hidden';
                 document.all.divFromSummer.display='block';
                 document.all.divToSummer.display='block';
                 document.all.divFromRegular.display='none';
                 document.all.divToRegular.display='none';
            }
        }
    }
    else{
        if (document.getElementById)
        {
            document.getElementById('divFromSummer').style.visibility='hidden';
            document.getElementById('divToSummer').style.visibility='hidden';
            document.getElementById('divFromRegular').style.visibility='visible';
            document.getElementById('divToRegular').style.visibility='visible';
            document.getElementById('divFromSummer').style.display='none';
            document.getElementById('divToSummer').style.display='none';
            document.getElementById('divFromRegular').style.display='block';
            document.getElementById('divToRegular').style.display='block';
        }
        else{
            if (document.layers)
            {
                document.divFromSummer.visibility='hidden';
                document.divToSummer.visibility='hidden';
                document.divFromRegular.visibility='visible';
                document.divToRegular.visibility='visible';
                document.divFromSummer.display='none';
                document.divToSummer.display='none';
                document.divFromRegular.display='block';
                document.divToRegular.display='block';
            }
            else{
                 document.all.divFromSummer.visibility='hidden';
                 document.all.divToSummer.visibility='hidden';
                 document.all.divFromRegular.visibility='visible';
                 document.all.divToRegular.visibility='visible';
                 document.all.divFromSummer.display='none';
                 document.all.divToSummer.display='none';
                 document.all.divFromRegular.display='block';
                 document.all.divToRegular.display='block';
            }
        }
    }
}
function removeAllOptions(DropDown)
{
	var i;
	for(i=DropDown.options.length-1;i>=0;i--)
	{
		DropDown.remove(i);
	}
}
 
function addOption(DropDown, value, text )
{
	var optn = document.createElement('OPTION');
	optn.text = text;
	optn.value = value;
	DropDown.options.add(optn);
}

Open in new window

Badotz

Instead of

document.TimetableQuery.value

try

document.getElementById('TimetableQuery').value

jazzIIIlove

Below the idea i think, not the full code, i wrote, no server i have in this machine:

<script language="JavaScript">
function toggleVisibility(s){
var obj = document.getElementById(s);

if (obj.style.display == "inline"){
obj.style.display = "none";
}
else{
obj.style.display = "inline";
}
}
</script>
<p class="someCSS" onclick="javascript:toggleVisibility('q1')"><span style="cursor:pointer;">
blablala</span> </p>
<div id="q1" style="display:none">
       <p class="someotherCSS"> yeayeayeayea </p>
       </div>
       <p class="CSSagain" onclick="javascript:toggleVisibility('q2')"><span style="cursor: pointer;">blabalblababa</span> </p>

Best regards...

alku83

ASKER

TimetableQuery is the name of the form, not the elements I want to show/hide

Badotz

Oh, then everything must be working - sorry to to intrude.

What was the question again?

alku83

ASKER

Sorry, i didn't mean to come across sounding rude. I also managed to copy the wrong code snippet, the correct one is attached below (and on the online example now, as well).

Basically if you go here: http://www.aspyre.com.au/timetablequery.aspx
And select "Summer Bus" from the first dropdown, it will call the javascript function "SummerRoute_OnChange", which should in turn call the function "ShowDropDowns". This should activate the second and third dropdowns. This isn't working only in Firefox.

Thanks...

function SummerRoute_OnChange()
{
    if(document.TimetableQuery.drpRouteSummer.value == '0')
    {
        document.TimetableQuery.drpFromSummer.options(0).text = '-- Please Select Route --';
        document.TimetableQuery.drpToSummer.options(0).text = '-- Please Select Route --';
        document.TimetableQuery.drpFromSummer.disabled=true;
        document.TimetableQuery.drpToSummer.disabled=true;
        document.TimetableQuery.drpFromSummer.value = 0;
        document.TimetableQuery.drpToSummer.value = 0;
        ShowDropDowns(true);
    }
    if(document.TimetableQuery.drpRouteSummer.value == '1')
    {
        ShowDropDowns(false);
    }
    if(document.TimetableQuery.drpRouteSummer.value == '3')
    {
        document.TimetableQuery.drpFromSummer.options(0).text = '-- Please Select --';
        document.TimetableQuery.drpToSummer.options(0).text = '-- Please Select --';
        document.TimetableQuery.drpFromSummer.disabled=false;
        document.TimetableQuery.drpToSummer.disabled=false;
        ShowDropDowns(true);
    }
}
 
function ShowDropDowns(IsSummer)
{
    if(IsSummer)
    {
        ShowElementByID('divFromSummer');
        ShowElementByID('divToSummer');
        HideElementByID('divFromRegular');
        HideElementByID('divToRegular');
    }
    else{
        HideElementByID('divFromSummer');
        HideElementByID('divToSummer');
        ShowElementByID('divFromRegular');
        ShowElementByID('divToRegular');
    }
}
 
function ShowElementByID(id) 
{
	if (document.getElementById)
	{
		document.getElementById(id).style.display = 'block';
		document.getElementById(id).style.visibility = 'visible';
	}
	else
	{
		if(document.layers)
		{
			document.id.display = 'block';
			document.id.visibility = 'visible';
		}
		else
		{
			document.all.id.style.visibility = 'block';
		}
	}
}
 
function HideElementByID(id) 
{
	if (document.getElementById)
	{
		document.getElementById(id).style.display = 'none';
	}
	else
	{
		if(document.layers)
		{
			document.id.display = 'none';
		}
		else
		{
			document.all.id.style.visibility = 'none';
		}
	}
}
 
 
function removeAllOptions(DropDown)
{
	var i;
	for(i=DropDown.options.length-1;i>=0;i--)
	{
		DropDown.remove(i);
	}
}
 
function addOption(DropDown, value, text )
{
	var optn = document.createElement('OPTION');
	optn.text = text;
	optn.value = value;
	DropDown.options.add(optn);
}

Open in new window

Badotz

Selecting "Routes 1/4" enables the dropdowns, and then you can select "Summer Bus" (not sure why).

Also, if you want to remove the elements from the page layout when they are hidden, use:

visibility:hidden

otherwise use:

display: none

There is no reason to use both.

And very few browsers in use today do not understand "document.getElementById" - not sure you need to be so convoluted about it.

jazzIIIlove

<<And very few browsers in use today do not understand "document.getElementById" - not sure you <<need to be so convoluted about it.

He is right...This is related with the logic dom introduced:
http://www.howtocreate.co.uk/tutorials/javascript/domstructure

alku83

ASKER

Fair enough - I have modified the Show/Hide functions to remove the extranneous code. However, I'm still not getting any joy from Firefox.

Selecting "Routes 1/4" does enable the dropdowns, but if you then select "Summer Bus" the wrong dropdowns are still shown. The content of the second/third dropdown should be different based on the selection. If you could give it a try in IE, hopefully you will see what i mean?

alku83

ASKER

Current version of the two functions I changed is attached below.

function ShowElementByID(id) 
{
	document.getElementById(id).style.display = 'block';
	document.getElementById(id).style.visibility = 'visible';
}
 
function HideElementByID(id) 
{
	document.getElementById(id).style.display = 'none';
}

Open in new window

Badotz

Line 4 is not necessary (as long as you also remove the unnecessary inline style from the DIV).

It is the "onchange" event itself, not your show/hide functions. Is FF expecting "onChange", or "OnChange" or some other such case-sensitive nonsense?

alku83

ASKER

Wow, do you ever sleep ;-)

We're getting somewhere now. What I have done is put an alert at the start of the OnChange function, and an alert at the end. It turns out that when I selected "Summer Bus" in FF, the second alert wasn't firing, so by a process of elimination I've narrowed the problem down to the two lines attached. If I uncomment either of those two, the second alert doens't fire.

They look pretty standard though - any suggestions?

document.TimetableQuery.drpFromSummer.options(0).text = '-- Please Select --';
document.TimetableQuery.drpToSummer.options(0).text = '-- Please Select --';

Open in new window

ASKER CERTIFIED SOLUTION

Badotz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

alku83

ASKER

Ah, that options[0] was the problem. Thanks for your help (and patience), points awarded.

Badotz

Why the "B" grade? Was I bad?

alku83

ASKER

After further consideration I would like to upgrade this answer to an A.
Originally I marked it as a B as I needed to do some research and look into it myself as well, but I wouldn't have found the answer without Badotz's help. Please upgrade this to A.