GlennLog

Turning technology from mumbo-jumbo into rich tasty gumbo

< Someone Finally Calls BS on Amazon's Highest Unit Sales PR | Main | Test the New Isbn.nu >

January 20, 2009

JavaScript Solution for Swapping Items in a List

This is very wonky, but I need to put it out on the internets, all of them, because it took me a good 20 minutes to figure this out.

In revising isbn.nu (new version will soon be in beta for your viewing and testing pleasure), I have added a bookmarks option where you set up an account, and can mark books, authors, or works for later recollection. I wanted to let people re-order the items in their bookmark lists at will. And I wanted this to be live -- JavaScript (AJAX for the database backend), not a page reload.

So I wrote up the code and it worked quite well, but the swapping seemed arbitrary after a couple of moves. Then I realized: I was using ID fields to swap items live, and I wasn't changing the ID of a particular row after I changed it. So, once swapped, it still had the old ID number but the new contents.

Enter getElementsByTag, which lets you rename the ID of a given object in the DOM. In this case, I'm passing the swap_prefix (a name) which is combined with an underscore and an ID from a database. That defines the row. Then I swap the internals using innerHTML, and then the ID using getElementsByTagName. Behind the scenes (not shown here), all the database updating is happening.

Here's the code, in case this helps someone at a future time. It requires Prototype.js, or you have to put in document.getElementById() instead of $().

var swap1 = swap_prefix + '_' + ids[1];
var swap2 = swap_prefix + '_' + ids[2];
var swapx_text = $(swap1).innerHTML;
$(swap1).innerHTML = $(swap2).innerHTML;
$(swap2).innerHTML = swapx_text;
var swap1tag = $(swap1).getElementsByTagName('div');
var swap2tag = $(swap2).getElementsByTagName('div');
swap1tag[0].parentNode.id = swap2;
swap2tag[0].parentNode.id = swap1;

Posted by Glennf at January 20, 2009 12:09 PM

Comments

Post a comment

Name:

Email Address:

URL:
Remember Me? YesNo

Comments: