ajax drop downs not working in IE, works in FF

[antonyx]

sorry, i have just seen the <br>.. watch this space.. it could be finished..

[antonyx]

it is working.. i think..


thank you so much..

[BrianOConnell]

Just in time to go home eh. I see you are the same side of the world.

[antonyx]

lol.. yeah

fortunately (or unfortunately) i am working at home so i'll be on it all day..

oh the joy of working for yourself...

[antonyx]

something is up.. it is taking too long to load..

it will load ok a few times.. then ill do a ctrl refresh and it will take ages.. sometimes it wont load the iframe either..

there is something wrong. i dont know what.

[antonyx]

when i remove the iframe (which loads the date and time) it loads straight away..

the iframe also works fine without the javascript we have just added.

therefore there is some kind of conflict between the two.. do you have any idea what could be causing this?

[antonyx]

hi, another question.

i am trying to do something with the form submit but dont know what the id of the second drop down is..

i know you can set the css class of something using className but how do you set the id of the dropdown.. can you use idName and then use that id in a script such as..

<&#37;
DIM place

place = request.form("dropdownID")

if place = "London Gatwick (LGW)" then
response.redirect("heathrow-to-gatwick.asp")
end if

%>

[antonyx]

function initSelects() {
    var selectdiv = $("selectarea");
    var masterlist = $("master");
    var opt = null;
    var i = 0;
    if (masterlist && selectdiv) {
var parentHeader = document.createElement("p");
var parentList = document.createElement("select");
var childHeader = document.createElement("p");
var childList = document.createElement("select");
var linebr = document.createElement("br");
var groups = $els("optgroup", masterlist);
opt = new Option("Please Choose..", "0");
parentList.options[parentList.options.length] = opt;
for (i = 0; groups[i]; i++) {
var groupname = groups[i].label;
opt = new Option(groupname, groupname);
parentList.options[parentList.options.length] = opt;
}

parentList.onchange = parentListChanged;
parentList.childSelect = childList;
parentList.className = "quote_dropdown";
parentHeader.className = "quote_text";
parentHeader.innerHTML = "1. Choose a category:";
selectdiv.appendChild(parentHeader);
selectdiv.appendChild(parentList);
childHeader.className = "quote_text";
childHeader.innerHTML = "2. Choose a location:";
// - line break not required if we insert a p tag
//selectdiv.appendChild(linebr);
selectdiv.appendChild(childHeader);
childList.className = "quote_dropdown";
childList.onchange = childListChanged;
selectdiv.appendChild(childList);
masterlist.className = "invisible";
    }
}
function parentListChanged() {
    var masterlist = $("master");
    var childList = this.childSelect;
    var i = 0;
    var j = 0;
    childList.options.length = 0;
    opt = new Option("...", "0");
    childList.options[childList.options.length] = opt;
    if (this.selectedIndex > 0) {
        //find the optgroup with this label
        var groups = $els("optgroup", masterlist);
        for (i = 0; groups[i]; i++) {
            var groupname = groups[i].label;
            if (groupname === this.options[this.selectedIndex].value) {
                masterlist.selectIndex = i;
                var groupitems = $els("option", groups[i]);
                for (j = 0; groupitems[j]; j++) {
                    var groupitem = groupitems[j];
                    var opt = new Option(groupitem.text, groupitem.value);
                    childList.options[childList.options.length] = opt;
                }
            }
        }
    }
}
function childListChanged() {
    var masterlist = $("master");
    masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
}
addLoadEvent(initSelects);
//adds an event to be run when the page has loaded
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
//utility function to get an element by id
function $(elementID) {
    return document.getElementById(elementID);
}
//utility function to get elements by tagname within the document or an element
function $els(tagName, parentElement) {
    if (parentElement) {
        return parentElement.getElementsByTagName(tagName);
    } else {
        return document.getElementsByTagName(tagName);
    }
}
function findByValue(obj, value)   {
    //this function takes a select element and a text value to
    //find the index of the option with the same value
    var idx = -1;
    var i = 0;
    for (i=0;i<obj.options.length;i++)  {
        if (obj.options[i].value == value)  {
            idx = i;
            break;
        }
    }
    return idx;
}

function childListChanged() {
    if (this.selectedIndex > 0) {
        var masterlist = $("master");
        masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
        $("form1").submit();
    }
}

[BrianOConnell]

when i remove the iframe (which loads the date and time) it loads straight away..

the iframe also works fine without the javascript we have just added.

therefore there is some kind of conflict between the two.. do you have any idea what could be causing this?

Without knowing what script is running on that iframe I don't know if it is conflicting. Is the code in the html of the page?

[BrianOConnell]

hi, another question.

i am trying to do something with the form submit but dont know what the id of the second drop down is..

i know you can set the css class of something using className but how do you set the id of the dropdown.. can you use idName and then use that id in a script such as..

<%
DIM place

place = request.form("dropdownID")

if place = "London Gatwick (LGW)" then
response.redirect("heathrow-to-gatwick.asp")
end if

%>

As I said above the script I gave you updates the masterselect when the childselect changes so when the page is submitted the masterselect can be inspected and will be set at the same selection as the child list. If you do want to set the id of one of the lists it's as simple as saying so:-

childList.id = "mychildlist"

I'm pretty sure the elements created by script will not be posted in the form but I would be wrong.

[antonyx]

great, i thought it would be something like IdName or something..

[antonyx]

hi brian, i am using this..

parentList.onchange = parentListChanged;
parentList.childSelect = childList;
parentList.className = "quote_dropdown";
parentHeader.className = "quote_text";
parentHeader.innerHTML = "1. Choose a category:";
selectdiv.appendChild(parentHeader);
selectdiv.appendChild(parentList);
childHeader.className = "quote_text";
childHeader.innerHTML = "2. Choose a location:";
// - line break not required if we insert a p tag
//selectdiv.appendChild(linebr);
selectdiv.appendChild(childHeader);
childList.id = "chosen";
childList.className = "quote_dropdown";
childList.onchange = childListChanged;
selectdiv.appendChild(childList);
masterlist.className = "invisible";

and this on my form..

<form method="post" action="redirect.asp" name="form1" id="form1" style="margin:0px;padding:0px;">

and this on redirect.asp

<&#37;
DIM place

place = request.form("chosen")

if place = "London Gatwick (LGW)" then
response.redirect("heathrow-to-gatwick.asp")
end if

%>

you mentioned the following:

I'm pretty sure the elements created by script will not be posted in the form but I would be wrong.

at the moment the above code is not redirecting based on the chosen value..

if i cannot use the values in these dynamically created drop downs then that is a massive problem.. i need to use them in my asp script..

help.

[antonyx]

oh hang on.. i can just use the id of the master cant i, cos it will be the same.. ok let me try that.

[antonyx]

yes that works.. phew..

thanks.

[BrianOConnell]

oh hang on.. i can just use the id of the master cant i, cos it will be the same.. ok let me try that.

I only said it about 5 times

[antonyx]

here is a general question.. i am going to use the following:


if place = "London Gatwick (LGW)" then
response.redirect("heathrow-to-gatwick.asp")
end if


for nearly 1000 places.. do you think it will take long to process these redirects..

[BrianOConnell]

here is a general question.. i am going to use the following:


if place = "London Gatwick (LGW)" then
response.redirect("heathrow-to-gatwick.asp")
end if


for nearly 1000 places.. do you think it will take long to process these redirects..

Far quicker to make the value of the item in the select the same as the url. Something like:-

<option value="heathrow-to-gatwick">London Gatwick (LGW)</option>

Then redirect to (place & ".asp") assuming place = request.form("masterselect")

[antonyx]

lol, that is far quicker.. yes.