?
Solved

insertBefore to reorder list elements needs to be called twice?

Posted on 2005-03-21
4
Medium Priority
?
1,111 Views
Last Modified: 2011-04-14
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!
0
Comment
Question by:inspire22
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13596141
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
 

Author Comment

by:inspire22
ID: 13596235
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
 
LVL 32

Accepted Solution

by:
Batalf earned 300 total points
ID: 13596329
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
 

Author Comment

by:inspire22
ID: 13596425
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

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question