Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

javascript show/hide problem with firefox

Posted on 2008-10-10
16
Medium Priority
?
646 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
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 
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
 

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 1000 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

Veeam Task Manager for Hyper-V

Task Manager for Hyper-V provides critical information that allows you to monitor Hyper-V performance by displaying real-time views of CPU and memory at the individual VM-level, so you can quickly identify which VMs are using host resources.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
When you put your credit card number into a website for an online transaction, surely you know to look for signs of a secure website such as the padlock icon in the web browser or the green address bar.  This is one way to protect yourself from oth…
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)
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

971 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