insertBefore to reorder list elements needs to be called twice?

I'm trying to provide a way to change the order of list elements, with the hopes that since form elements of the same name are submitted in order, it will be an easy way to rearrange a list for my ruby (a language like perl) program.

  function switch_up(me) {
    me = me.parentNode
    if (!me.previousSibling) alert('no previous')
   
 // have to do it twice.  WIERD
    me.parentNode.insertBefore( me, me.previousSibling    )
    return false;
  }

I've also tried it with
    me.parentNode.insertBefore( me, me.previousSibling.previousSibling    )

which sortof works, but clicking it a few times causes it to mess up (i.e. 'up' on the third entry moves it to the top, rather than to the 2nd entry).


  function switch_up(me) {
    me = me.parentNode
    if (!me.previousSibling) alert('no previous')
   
 // have to do it twice.  WIERD
    me.parentNode.insertBefore( me, me.previousSibling    )
    return false;
  }

I've also tried it with
    me.parentNode.insertBefore( me, me.previousSibling.previousSibling    )

<ul>
    <li>my poem 0
      <a href='#' onclick='return switch_up(this)'>up</a>
      <a href='#' onclick='return switch_down(this)'>down</a>
      <input type='hidden' name='ordr' value='0'>
    </li>
   
    <li>my poem 1
      <a href='#' onclick='return switch_up(this)'>up</a>
      <a href='#' onclick='return switch_down(this)'>down</a>
      <input type='hidden' name='ordr' value='1'>
    </li>
   
    <li>my poem 2
      <a href='#' onclick='return switch_up(this)'>up</a>
      <a href='#' onclick='return switch_down(this)'>down</a>
      <input type='hidden' name='ordr' value='2'>
    </li>
</ul>

I've uploaded a (non, hah) working version here, so you can play + see what I mean:
http://allpoetry.com/images/list.html#

My testing has been on osx/firefox.  Thanks for any help you can give!
inspire22Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
BatalfConnect With a Mentor Commented:
Seems that Firefox counts differently than IE.

This works in both browsers. The code probably need some tuning, but I hope it will help despite that:


function switch_up(me) {
    me = me.parentNode;
    if (!me.previousSibling){
          alert('no previous');
          return false;
    }
   
    var obj = me.previousSibling;
    if(!me.previousSibling.tagName){ // No tag name(FIREFOX FIX)
          obj = obj.previousSibling;    
    }
    if(!obj)return;

       // have to do it twice.  WIERD
    me.parentNode.insertBefore( me, obj    )
    return false;
  }
0
 
BatalfCommented:
You should return from the function if no previousSibling is found. Maybe that's the problem.

Try

function switch_up(me) {
    me = me.parentNode
    if (!me.previousSibling){
        alert('no previous');
        return false;
    }
   
     // have to do it twice.  WIERD
    me.parentNode.insertBefore( me, me.previousSibling    )
    return false;
  }
0
 
inspire22Author Commented:
That's definately a bug, but seems unrelated to the 'need to click twice' problem.

I just tried it on a windows/IE machine, and it doesn't need twice-clicking.  Perhaps its some bug with firefox?
0
 
inspire22Author Commented:
Thanks so much! :)  I hadn't thought of just splitting it and working in a fix for firefox.  My impression was that the DOM was fairly standardized even between browsers... but occasionally firefox is wierd with things.  Usually IE is even more wierd though :)

.tagName is a general way to get into firefox-only?  Any reason to use it rather than greping the navigator.appname value?

0
All Courses

From novice to tech pro — start learning today.