Solved

javascript show/hide problem with firefox

Posted on 2008-10-10
16
604 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
ID: 22691578
Instead of

document.TimetableQuery.value

try

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

Expert Comment

by:jazzIIIlove
ID: 22691606
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
ID: 22692898
TimetableQuery is the name of the form, not the elements I want to show/hide
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22693133
Oh, then everything must be working - sorry to to intrude.

What was the question again?
0
 

Author Comment

by:alku83
ID: 22693756
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
ID: 22693856
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
ID: 22694428
<<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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:alku83
ID: 22695531
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
ID: 22695535
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
ID: 22695656
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
ID: 22695685
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
ID: 22697783
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
ID: 31505227
Ah, that options[0] was the problem. Thanks for your help (and patience), points awarded.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22698611
Why the "B" grade? Was I bad?
0
 

Author Comment

by:alku83
ID: 22699541
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

914 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

17 Experts available now in Live!

Get 1:1 Help Now