none
IE 11 compatibility issues RRS feed

  • Question

  • Hi Support team,
    My code works perfectly on IE 9 but does not work properly on IE 11. I have a list box which has some elements and has a button to select an element move it Up/Down. I am able to select an element and move it Up/Down, but only once.

    I am not able to select any other element after that.

    I am not allowed to use the below tag in my code.

    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >

    Below is my code u can open it on IE 11 browser and check.

    <HTML>
    <HEAD>
        <STYLE type="text/css">
     
        body { font-family:Arial; }
        a { color:#00f; text-decoration:none; }
     
        </STYLE>
     
        <SCRIPT type="text/javascript">
         
        function listbox_move(listID,direction){
        var listbox=document.getElementById(listID);
        var selIndex=listbox.selectedIndex;
        if(-1==selIndex){alert("Please select an option to move.");return;}
        var increment=-1;
        if(direction=='up')
            increment=-1;
        else
            increment=1;
        if((selIndex+increment)<0||(selIndex+increment)>(listbox.options.length-1)){return;}
         
        var selValue=listbox.options[selIndex].value;
        var selText=listbox.options[selIndex].text;
        listbox.options[selIndex].value=listbox.options[selIndex+increment].value;
        listbox.options[selIndex].text=listbox.options[selIndex+increment].text;
        listbox.options[selIndex+increment].value=selValue;
        listbox.options[selIndex+increment].text=selText;
        listbox.selectedIndex=selIndex+increment;
        }
     
     
        function listbox_moveacross(sourceID,destID){
        var src=document.getElementById(sourceID);
        var dest=document.getElementById(destID);
         
        var picked1 = false;
        for(var count=0;count<src.options.length;count++){
            if(src.options[count].selected==true){picked1=true;}
        }
     
        if(picked1==false){alert("Please select an option to move.");return;}
     
        for(var count=0;count<src.options.length;count++){
            if(src.options[count].selected==true){var option=src.options[count];
                var newOption=document.createElement("option");
                newOption.value=option.value;
                newOption.text=option.text;
                newOption.selected=true;
                try{dest.add(newOption,null);
                src.remove(count,null);
            }
                catch(error){dest.add(newOption);src.remove(count);
            }
            count--;
            }
        }}
     
        function listbox_selectall(listID,isSelect){
            var listbox=document.getElementById(listID);
            for(var count=0;count<listbox.options.length;count++){
                listbox.options[count].selected=isSelect;
                }
        }
     
        </SCRIPT>
     
        <TITLE>Listbox JavaScript functions</TITLE>
     
    </HEAD>
     
    <BODY>
     
     
    <table border="1" align="center" style="border-collapse:collapse;">
    <tr>
    <td colspan="5" align="center"><font size="+2"><b>Listbox Functions</b></font></td>
    </tr>
    <tr valign="top">
    <th>Move up/down</th>
    <td></td>
    <th colspan="3">Move left/right</th>
    </tr>
    <tr valign="top">
    <td>
    <SELECT id="a" size="10" multiple>
        <OPTION value="a">Afghanistan</OPTION>
        <OPTION value="b">Bahamas</OPTION>
        <OPTION value="c">Barbados</OPTION>
        <OPTION value="d">Belgium</OPTION>
        <OPTION value="e">Bhutan</OPTION>
        <OPTION value="f">China</OPTION>
        <OPTION value="g">Croatia</OPTION>
        <OPTION value="h">Denmark</OPTION>
        <OPTION value="i">France</OPTION>
        <OPTION value="j">Canada</OPTION>
    </SELECT>
     
     
    </td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>
    <SELECT id="s" size="10" multiple>
        <OPTION value="a">Afghanistan</OPTION>
        <OPTION value="b">Bahamas</OPTION>
        <OPTION value="c">Barbados</OPTION>
        <OPTION value="d">Belgium</OPTION>
        <OPTION value="e">Bhutan</OPTION>
        <OPTION value="f">China</OPTION>
        <OPTION value="g">Croatia</OPTION>
        <OPTION value="h">Denmark</OPTION>
        <OPTION value="i">France</OPTION>
        <OPTION value="j">Canada</OPTION>
    </SELECT>
     
     
    </td>
    <td valign="middle">
    <a href="#" onclick="listbox_moveacross('s', 'd')">?</a>
    <br/>
    <a href="#" onclick="listbox_moveacross('d', 's')">?</a>
    </td>
    <td>
    <SELECT id="d" size="10" multiple>
        <OPTION value="a">Albania</OPTION>
        <OPTION value="b">Bohemia</OPTION>
        <OPTION value="c">Brazil</OPTION>
        <OPTION value="d">Bhutan</OPTION>
        <OPTION value="e">Bolivia</OPTION>
        <OPTION value="f">Chile</OPTION>
        <OPTION value="g">Cuba</OPTION>
        <OPTION value="h">Djibouti</OPTION>
        <OPTION value="i">Finland</OPTION>
        <OPTION value="j">Greece</OPTION>
    </SELECT>
     
     
    </td>
    </tr>
     
    <tr>
    <td>
    Move <a href="_____#" onclick="listbox_move('a', 'up')">? up</a>,
    <a href="#" onclick="listbox_move('a', 'down')">? dn</a>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
    </tr>
     
    <tr>
    <td>
    Select
    <a href="#" onclick="listbox_selectall('a', true)">all</a>,
    <a href="#" onclick="listbox_selectall('a', false)">none</a>
    </td>
    <td>
    </td>
    <td>
    Select
    <a href="#" onclick="listbox_selectall('s', true)">all</a>,
    <a href="#" onclick="listbox_selectall('s', false)">none</a>
    </td>
    <td>
    </td>
    <td>
     
    Select
    <a href="#" onclick="listbox_selectall('d', true)">all</a>,
    <a href="#" onclick="listbox_selectall('d', false)">none</a>
     
    </td>
    </tr>
     
    </table>
     
    </BODY>
    </HTML>

    Tuesday, July 15, 2014 12:40 PM

All replies