locked
IE 11 compatibility issue RRS feed

  • Question

  • Hi,

    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>

    Friday, July 18, 2014 8:57 AM

Answers

  • In addition to Herro's fix with the link.  and great animated gifs   :)

    Try putting a <!DOCTYPE html> at the beginning of your document.

    And this at the end of your listbox_move function.

     

    listbox.multiple=false

    setTimeout(function(){listbox.multiple=true},0)

    Tuesday, July 22, 2014 12:59 PM

All replies

  • Hi Anup,

    I build a project to test your code and it works fine on my side. You can see the result from the GIF. I make a small change. Change “<a href="_____#" onclick="listbox_move('a', 'up')">? up</a>,” to “href="#"”. Maybe you should test your project on another computer.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. &lt;br/&gt; Click &lt;a href=&quot;http://support.microsoft.com/common/survey.aspx?showpage=1&amp;scid=sw%3Ben%3B3559&amp;theme=tech&quot;&gt; HERE&lt;/a&gt; to participate the survey.

    Monday, July 21, 2014 6:06 AM
  • Hi Herro,

    Thanks a lot. But my issue is something different. I am just talking about the first listbox. Please try the following steps -

    1. Make sure that IE compatibility setting is turned off.

    2. Select any one option from the first listbox (Move up/down) say Afghanistan.

    3. Click on Up/Down to move it. This should work fine.

    4. After this try to select some other item (say Bahamas) from the same list box and try to move it Up/Down. This does not happen, I am unable to select any other item.

    Could you please check if you are able to reproduce this behaviour. I am looking for a fix for this issue.

    Thanks,

    Anup


    Anup Pomannawar

    Monday, July 21, 2014 6:30 AM
  • Hi Anup,

    Unfortunately, seems work to me. See the GIF.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. &lt;br/&gt; Click &lt;a href=&quot;http://support.microsoft.com/common/survey.aspx?showpage=1&amp;scid=sw%3Ben%3B3559&amp;theme=tech&quot;&gt; HERE&lt;/a&gt; to participate the survey.

    Tuesday, July 22, 2014 6:11 AM
  • Hi,

    This is very strange. I tried opening the page on different machines as well but i see the same behaviour.

    Your and my browser sub version is also same. This is driving me nuts now.

    Do you have any idea why this is happening ?

    Regards,


    Anup Pomannawar

    Tuesday, July 22, 2014 9:50 AM
  • In addition to Herro's fix with the link.  and great animated gifs   :)

    Try putting a <!DOCTYPE html> at the beginning of your document.

    And this at the end of your listbox_move function.

     

    listbox.multiple=false

    setTimeout(function(){listbox.multiple=true},0)

    Tuesday, July 22, 2014 12:59 PM
  • hey thanks for the solution, but I can't move multiple items up/down..

    i tried to change the code to "listbox.multiple=true" ...but doesn't work.


    Anup Pomannawar


    Wednesday, July 23, 2014 7:38 AM
  • I don't understand your meaning.

    I also saw (I'm confirming) the problem in left column, where after moving single selected item up/down, we could no longer select new item.  The blue bar would not change on clicking other items there, and the gray bar wouldn't appear beforehand.

    Somehow this mod makes that work, fixes it.  For me.  How about for you?

     

    Are you saying also, whole groups of multiple items can be moved up/down too?  I cannot see that happen either.

    Wednesday, July 23, 2014 8:06 AM
  • Yes, I mean a group of multiple items, for e.g. say you select Bhutan, China, Croatia all three that are one below the other and then try to move this bunch of 3 values Up/Down, only one out three gets shifted not all.

    I want this group of values to be shifted Up/Down.

    Selecting just one works by your earlier solution.

    Can you please help me here ?

    Thanks


    Anup Pomannawar

    Wednesday, July 23, 2014 8:45 AM
  •  

     

    Well, that can be pretty ambitious.  I mean, we can control-click non-contiguous options.  Like say, the 2nd 4th and 8th each blue selected, but nothing in between is selected.  Then what?

    Wednesday, July 23, 2014 9:50 AM
  • I dont understand what you are tyring to convey here. Selecting 2nd, 4th and 8th and trying to move this selection will only move the 2nd item Up/Down.

    What I am asking is select either 2 or more consecutive items (hold the shift key and then make selection using mouse click) and then move this bunch Up/Down.

    Can we achieve this ?

    Thanks,


    Anup Pomannawar


    Wednesday, July 23, 2014 10:00 AM
  • I will have to think more to understand your meaning.  In the pic above, when we click "up" for example, which one of those three is supposed to go up?  Well, you said already the top one.  I don't see why that one instead of either of the others.  It's arbitrarily the first one?

    Anyway, I can word-out for you an algorithm I just worked out in my mind.  It's not hard to implement, but it is manual.  No avoiding that, I think.  It would include both your case of moving groups of multiple contiguous entries, and, my concern about the individual non-contiguous ones.  They'd all move.  Is that an ok plan?


    Wednesday, July 23, 2014 10:16 AM
  • Answering your first question, I think the element that is selected last should get moved.

    Anyway, I would like to implement your algorithm. Please share.

    Thanks,


    Anup Pomannawar

    Wednesday, July 23, 2014 10:25 AM
  • We will make two arrays.

    The first array, call it A.  Copy all non-selected option entries (text+value) into it, in top-down order.  Don't worry about original indexes.  They are populated sequentially with no gaps in this array A.

    The second array, call it B.  Make it same size as left column's option count.  Fill each entry with nulls.  Then.  Copy each selected option (text+value) into this array B, into its new correct indexed position.  (correct, in sense of up n-1 or down n+1).

    Next, copy array A entries from top-down into array B, sequentially, only into the null entries.  (See how they flow around the selected ones?  easy.)

    Finally, copy whole array B back to original select option elements (value+text).

     

    The only thing I didn't mention above is, we also need to remember which items in array B were the selected ones, so we can mark those into the select options during the final copy-back step.


    Wednesday, July 23, 2014 10:41 AM
  •     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;
    
    
    		var LO=listbox.options, N=LO.length, A=[], B=new Array(2*N);
    
    		if ((LO[0].selected && (increment<0)) || (LO[N-1].selected && (increment>0))) return
    
    		for (var i=0, j; i<N; i++){
    
    			if (!LO[i].selected) { A.push(LO[i].text); A.push(LO[i].value) }
    			else{ j=(i+increment)*2; B[j]=LO[i].text; B[j+1]=LO[i].value }
    		}
    
    		for (var i=0, j, a=0; i<N; i++){
    
    			if (B[(j=(2*i))]) { LO[i].text=B[j]; LO[i].value=B[j+1]; LO[i].selected=true }
    			else{ LO[i].text=A[a++]; LO[i].value=A[a++]; LO[i].selected=false }
    		}
        }

    <td>
    	<!-- IE11 workaround.  event.preventDefault() -->
    
    Move <a href="#" onclick="event.preventDefault();listbox_move('a', 'up')">? up</a>,
    <a href="#" onclick="event.preventDefault();listbox_move('a', 'down')">? dn</a>
    </td>

     

     

    https://googledrive.com/host/0B8BLd2qPPV7XSFpQZjZLZURFeG8

    Wednesday, July 23, 2014 11:21 PM