Solved

javascript show/hide problem with firefox

Posted on 2008-10-10
16
597 Views
Last Modified: 2013-12-07
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

0
Comment
Question by:alku83
  • 7
  • 6
  • 2
16 Comments
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
Instead of

document.TimetableQuery.value

try

document.getElementById('TimetableQuery').value
0
 
LVL 12

Expert Comment

by:jazzIIIlove
Comment Utility
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...
0
 

Author Comment

by:alku83
Comment Utility
TimetableQuery is the name of the form, not the elements I want to show/hide
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
Oh, then everything must be working - sorry to to intrude.

What was the question again?
0
 

Author Comment

by:alku83
Comment Utility
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

0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
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.

 
0
 
LVL 12

Expert Comment

by:jazzIIIlove
Comment Utility
<<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
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:alku83
Comment Utility
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?
0
 

Author Comment

by:alku83
Comment Utility
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

0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
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?
0
 

Author Comment

by:alku83
Comment Utility
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

0
 
LVL 29

Accepted Solution

by:
Badotz earned 250 total points
Comment Utility
Again, I would try

document.getElementById('TimetableQuery').options[0].text = '-- Please Select --';

Note also that "options(0)" does not refer to the Options collection, but to a FUNCTION that may or may not exist, while "options[0]" DOES refer to the Options collection.
0
 

Author Closing Comment

by:alku83
Comment Utility
Ah, that options[0] was the problem. Thanks for your help (and patience), points awarded.
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
Why the "B" grade? Was I bad?
0
 

Author Comment

by:alku83
Comment Utility
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.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now