Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Moving items in a Listbox

    Hi Everyone!! I have a fully working listbox that I'm having troubles with. The idea is to select from the first box and add to the second box. I've done this a variety of ways and wanted to use DOM as it solves some speed issues with the other solutions if the elements in the boxes are in the thousands.

    The problem I'm having may be in IE6, note how using the code below that you can move items over to the right hand side using "Add >" and it sorts it the result like a good script. But when you start to move things the other way using "< Rem" the first box is fine, but the 2nd box never bothers to remove the results! From there on, the moving is pretty much broken. I suspect this is an IE bug since if I ALT+TAB and hide the browser then go back the results are as they should be, however, perhaps I'm just doing something dumb in my code? Help?

    Code:
    <html>
      <head>
        <title>Swap Test</title>
        <script language="JavaScript">
            function domSwap(fromList, toList) {
                // If nothing is selected then return
                var selIndex = fromList.selectedIndex;
                if(selIndex < 0) { return; }
    
                // Prepare variables
                var arrLookup   = new Array();  // To quickly find the index of the text
                var arrToList   = new Array();  // To use JavaScripts builtin sort
                var newToList   = toList.cloneNode(false);   // Only clone the parent
    
                // Decrement to keep the changing index from affecting the moves
                for(var i = fromList.length - 1; i >= 0; i--) {
                    arrLookup[fromList.options.item(i).text] = i;
                    if(fromList.options.item(i).selected) {
                        // Append to the toList unsorted initially
                        toList.appendChild(fromList.options.item(i));
                    }
                }
    
                // Prepare the sorting arrays
                for( var i = 0; i < toList.length; i++)  {
                    arrLookup[toList.options.item(i).text] = i;
                    arrToList[i] = toList.options.item(i).text;
                }
                arrToList.sort(); // <-- Where the action really occurs
    
                // Decrement to keep the index from being affected
                for( var i = arrToList.length - 1; i >= 0; i-- ) {
                    // Use insertBefore instead of appendChild because of decrementing.
                    newToList.insertBefore(toList.options.item(arrLookup[arrToList[i]]).cloneNode(true), newToList.options.item(0));
                }
    
                // Swap the unsorted node with the sorted one.
                toList.replaceNode(newToList);
    
                // Deselect any selected options.
                fromList.selectedIndex  = -1;
                toList.selectedIndex    = -1;
            }
    
        </script>
      </head>
    
      <body>
      <form name="f">
        <table border="0">
          <tr>
            <td>
              <select size="6" id="tableOne" name="tableOne">
                <option value="alpha">alpha</option>
                <option value="charlie">charlie</option>
                <option value="echo">echo</option>
                <option value="golf">golf</option>
              </select>
            </td>
            <td valign="top">
              <input type="button" value="Add >" onClick="domSwap(document.getElementById('tableOne'), document.getElementById('tableTwo'));"/><br> <br>
              <input type="button" value="< Rem" onClick="domSwap(document.getElementById('tableTwo'), document.getElementById('tableOne'))"/><br>
            </td>
            <td>
              <select size="6" id="tableTwo" name="tableTwo">
                <option value="bravo">bravo</option>
                <option value="delta">delta</option>
                <option value="foxtrot">foxtrot</option>
                <option value="hotel">hotel</option>
              </select> </td>
          </tr>
        </table>
      </form>
    
      </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Cincinnati, OH
    Posts
    545
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was trying to debug your code and commented out:
    Code:
     //toList.replaceNode(newToList);
    after this it seems that the script works fine.
    does this sig match?

  • #3
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, so perhaps the replaceNode isn't fleshed out. It takes out my clever way of sorting behind the scenes, but I guess I'll deal with it. I'll try it out on Monday, since at night I masquerade as a Mac user.

  • #4
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Allida! But I couldn't forego my sorting, so I put in a hack. It seems that by adding the line

    Code:
    // Swap the unsorted node with the sorted one.
    toList.swapNode(newToList);
    fromList.swapNode(fromList); // IE workaround
    forces IE to refresh the listbox and the sorting that was done behind the scene shows itself.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •