javascript select box hanging on second select in ie7

Posted by bsandrabr on Stack Overflow See other posts from Stack Overflow or by bsandrabr
Published on 2010-04-27T20:28:21Z Indexed on 2010/04/29 10:47 UTC
Read the original article Hit count: 368

Filed under:
|
|

I have a drop down select box inside a div. When the user clicks on change, a dropdown box appears next to the change/submit button and the user makes a selection which then updates the db and the selection appears instead of the dropdown. All works fine in IE8 and firefox but in IE7 it allows one selection (there are several identical dropdowns) but the second time a selection is made it hangs on please wait. This is the relevant code

<td width=200>

<input type="button" onclick="startChanging(this)" value="Change" /></td>

<script type="text/javascript">
var selectBox, isEditing = false;
var recordvalue;
if( window.XMLHttpRequest ) {
    recordvalue = new XMLHttpRequest();
} else if( window.ActiveXObject ) {
    try {
        recordvalue = new ActiveXObject('Microsoft.XMLHTTP');
    } catch(e) {}
}
window.onload = function () {
    selectBox = document.getElementById('changer');
    selectBox.id = '';
    selectBox.parentNode.removeChild(selectBox);

};
function startChanging(whatButton) {
    if( isEditing && isEditing != whatButton ) { return; } //no editing of other entries
    if( isEditing == whatButton ) { changeSelect(whatButton); return; } //this time, act as "submit"
    isEditing = whatButton;
    whatButton.value = 'Submit';
    var theRow = whatButton.parentNode.parentNode;
    var stateCell = theRow.cells[3]; //the cell that says "present"
    stateCell.className = 'editing'; //so you can use CSS to remove the background colour
    stateCell.replaceChild(selectBox,stateCell.firstChild); //PRESENT is replaced with the select input
    selectBox.selectedIndex = 0;
}
function changeSelect(whatButton) {
    isEditing = true; //don't allow it to be clicked until submission is complete
    whatButton.value = 'Change';
    var stateCell = selectBox.parentNode;
    var theRow = stateCell.parentNode;
    var editid = theRow.cells[0].firstChild.firstChild.nodeValue; //text inside the first cell
    var value = selectBox.firstChild.options[selectBox.firstChild.selectedIndex].value; //the option they chose

    selectBox.parentNode.replaceChild(document.createTextNode('Please wait...'),selectBox);
    if( !recordvalue ) {
        //allow fallback to basic HTTP
        location.href = 'getupdate.php?id='+editid+'&newvalue='+value;
    } else {
        recordvalue.onreadystatechange = function () {
            if( recordvalue.readyState != 4 ) { return; }
            if( recordvalue.status >= 300 ) { alert('An error occurred when trying to update'); }
            isEditing = false;
            newState = recordvalue.responseText.split("|");
            stateCell.className = newState[0];
            stateCell.firstChild.nodeValue = newState[1] || 'Server response was not correct';
        };
        recordvalue.open('GET', "getupdate.php?id="+editid+"&newvalue="+value, true);
        recordvalue.send(null);
    }
}
</script>    

If anyone has any idea why this is happening I'd be very grateful

© Stack Overflow or respective owner

Related posts about javascript-events

Related posts about JavaScript