Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login




Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Donate Today!

Do you enjoy these
technical forums?
Donate Today! Click Here

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.
Jobs from Indeed

Link To This Forum!

Partner Button
Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

dynamic list creation and IE7 problem

wbodger (Programmer) (OP)
14 Apr 08 17:06
I have a dynamic list creation script that I inherited that acts a little funny in IE7. The script is:

CODE

function fillCategory(){
 // this function is used to fill the category list on load
addOption(document.drop_list.Category, "High School", "High School", "");
addOption(document.drop_list.Category, "Middle School", "Middle School", "");
addOption(document.drop_list.Category, "Combined", "Combined", "");
}

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "--Trip--", "");

if(document.drop_list.Category.value == 'High School'){
addOption(document.drop_list.SubCat,"Belize", "Belize");
addOption(document.drop_list.SubCat,"Camp Joy", "Camp Joy");
addOption(document.drop_list.SubCat,"Cranks Creek", "Cranks Creek");
addOption(document.drop_list.SubCat,"Jamaica", "Jamaica");
addOption(document.drop_list.SubCat,"New Orleans 1", "New Orleans 1");
addOption(document.drop_list.SubCat,"New Orleans 4", "New Orleans 4");
addOption(document.drop_list.SubCat,"Tex Mex 1", "Tex Mex 1");
addOption(document.drop_list.SubCat,"Tex Mex 2", "Tex Mex 2");
addOption(document.drop_list.SubCat,"Yucatan, Mexico", "Yucatan, Mexico");
}
if(document.drop_list.Category.value == 'Middle School'){
addOption(document.drop_list.SubCat,"Chattanooga, TN (MS)", "Chattanooga, TN (MS)");
addOption(document.drop_list.SubCat,"Dungannon, VA", "Dungannon, VA");
addOption(document.drop_list.SubCat,"Tex Mex (MS)", "Tex Mex (MS)", "");
addOption(document.drop_list.SubCat,"West Virginia (MS)", "West Virginia (MS)");
}
if(document.drop_list.Category.value == 'Combined'){
addOption(document.drop_list.SubCat,"Chattanooga, TN", "Chattanooga, TN");
addOption(document.drop_list.SubCat,"Jackonsville, FL", "Jackonsville, FL");
addOption(document.drop_list.SubCat,"New Orleans 2", "New Orleans 2");
addOption(document.drop_list.SubCat,"New Orleans 3", "New Orleans 3");
addOption(document.drop_list.SubCat,"West Va 1 (Panther)", "West Va 1 (Panther)");
addOption(document.drop_list.SubCat,"West Va 2 (Welch)", "West Va 2 (Welch)");
}

}
//////////////////

function removeAllOptions(selectbox)
{
    var i;
    for(i=selectbox.options.length-1;i>=0;i--)
    {
        //selectbox.options.remove(i);
        selectbox.remove(i);
    }
}


function addOption(selectbox, value, text )
{
    var optn = document.createElement("OPTION");
    optn.text = text;
    optn.value = value;

    selectbox.options.add(optn);
}

ad I call it like:

CODE

<tr>
    <td colspan="2" class="style3"><div align="right">Age Group:</div></td>
    <td class="style3"><div align="left">
            <select name="Category" id="Category" class="dropdown" onChange="SelectSubCat();">
                <option value="">--Age Group--</option>
            </select>
        </div>
    </td>
</tr>
<tr>
    <td colspan="2" class="style3"><div align="right">Trip Attending:</div></td>
    <td class="style3"><div align="left">
            <SELECT id="SubCat" NAME="SubCat">
                <Option value="">--Trip--</Option>
            </SELECT>
        </div>
    </td>
</tr>

where the form is

CODE

<form action="sonservants.asp" name="drop_list" method="post" onKeyUp="highlight(event)" onClick="highlight(event)" onSubmit="return isFormComplete(this);">

Now, what is happening is that with IE7 you cannot use your mouse to select anything from the drop down menus, bt you can select the select box and then use the arrow keys to select what you want to choose. So, any body have any thoughts on what the issue may be?

Thanks,
Willie
j4606 (MIS)
14 Apr 08 17:12
Where is your hightlight function? Could you provide a working example of the page or a link so we could test out what you are seeing?
wbodger (Programmer) (OP)
14 Apr 08 17:20
Here is a page where the code resides:

http://www.ycmhome.org/sonservants/downloads.html

is that enough? As for the highlight function, now that you mention it, I do not see one anywhere...
wbodger (Programmer) (OP)
14 Apr 08 17:23
No, I found the highlight function:

CODE

//Function to highlight form element
function highlight(e){
eventobj=ns6? e.target : event.srcElement
if (previous!=''){
if (checkel(previous))
previous.style.backgroundColor=''
previous=eventobj
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
}
else{
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
previous=eventobj
}
}
j4606 (MIS)
15 Apr 08 10:47
I don't exactly know why but your highlight function is reseting the form elemnt. It could be something do to with ie redraw of the select list. I havn't been able to test any futher than that. To make your code work in ie for select lists call your highlight function from onactivate instead of onclick.

CODE

<form action="sonservants.asp" name="drop_list" method="post" onkeyup="highlight(event)" onactivate="highlight(event)"  onsubmit="return isFormComplete(this);">

unfortunatly this will break your code in other browsers like firefox. So you may have to code branch and have one highlight function for ie and another for firefox. Or branch with logic. Make sure you remove

CODE

onclick="highlight(event);"
from your ie versions as that is what is keeping select list from working properly.
wbodger (Programmer) (OP)
15 Apr 08 14:38
Interesting. I just removed that call altogether and it works fine for both browsers. However, I left

CODE

onkeyup="highlight(event)"

and that works just fine in both firefox and IE7. Anyway, thanks for the help!

Willie

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Back To Forum

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close