How to reorder a row of html input fields without getting into AJAX

Question

I'm generating a set of rows of html input text fields, which I want my end-users to be able to reorder. I don't want to use AJAX, but am okay with Javascript.

I'm okay with some arrow buttons placed on the side of each row, which when pressed move the fields up and down.

My issue with AJAX is that its too heavy (50-60kb) for just this functionality. I had a look at some Yahoo code (YUI), but again, it seems overkill for one particular functionality. I found this - http://www.danvk.org/wp/dragtable/ - which is seems like the lightest code, but only allows column reordering.

I'll be working on the last option, but I'm open to other thoughts / approaches on how to do this (ie, to allow the user to reorder the row-wise fields).

PS: Not important to this discussion I suppose, but I'm using PHP to generate these html text fields.

Answer 1

Adding to the Josef's answer...

According to W3C DOM Level 2 Core specification:

insertBefore

Inserts the node newChild before the existing child node refChild. [...] If the newChild is already in the tree, it is first removed.

Thus, there is no need to call removeChild() before calling insertChild().

Also, IE6 DOM support is very bad, so you might need to write specific code for it. Or maybe you would prefer to not waste time supporting this browser, and ask users to upgrade. Or, if you really need to support IE6, maybe using a JavaScript library (like jQuery) could be an easy solution.

Edit: This is the final JavaScript solution, based on Josef's answer:

function up(row) {
    var prevRow = row.previousSibling;
    if(prevRow) {
        row.parentNode.insertBefore(row, prevRow);
    }
}

Answer 2

You can write a javascript function similar to this one

function up(row) {
    var prevRow = row.previousElementSibling;
    if(prevRow != null) {
        row.parentNode.removeChild(row);
        document.body.insertBefore(row, prevRow);
    }
};

and use it in your rows like this:

<p>
    <input type="text"/>
    <a onclick="up(this.parentNode)">Up</a>
</p>

I agree with you that you don't really need to reference a Javascript framework for a very simple task like this.

Answer 3

You seem to be confused; AJAX is a general term referring to using Javascript to load extra content from a server via sub-requests without actually loading a new page. There are many different Javascript libraries that can handle AJAX requests.

Perhaps you're thinking of one of the more popular libraries like JQuery when you say "AJAX"?

As for your question - one thing to remember is that with proper server configuration, client browsers will general cache Javascript libraries after the first request; thus the consistent overall load time isn't as impacted by the size of such libraries - only that first page load. You can avoid even that if you use the Google-hosted copy of JQuery, which is likely to already be cached by the large majority of visitors to your site.