sort items like Netflix - dynamically change text boxes or select fields

[juglesh]

Hello, I would like to be able to have the user sort a list of items
similarly to the way you sort your queue on Netflix.com. (the numbers
dont change dynamically on netflix, they must be doing something
serverside with them)

Like this: ([] represents a text or select filed)
[1] an item
[2] something else
[3] a differnt thing
[4] the other
[5] yougetthepicture

So, the user would change the 5 to a 1 if he wanted that item to be #1.
I thought that if i had script that would move everything down a
number each time the user changed one of them, that would work. The
items can stay where they are, i dont need them to change dynamically.
As long as when they are done, each item has a new number, and i can
submit the textboxes as an array to PHP.

I am populating the text boxes and the list of items with php, so the
solution would have to be able to work on any number of items.

I could deal with a serverside PHP solution if anyone knows something
that would work that way.

thanks for your time,
juglesh

[Dietmar Meier]

juglesh wrote:

So, the user would change the 5 to a 1 if he wanted that item to be
#1. I thought that if i had script that would move everything down a
number each time the user changed one of them, that would work. The
items can stay where they are, i dont need them to change dynamically.

Quickhack, barely tested:

function renumber(oInput) {
var oForm = oInput.form,
oElements = oForm.elements,
nElements = oElements.length,
nOrder = parseInt(oInput.value, 10) || 0,
aElements = [],
i, n, oCurElem;
oInput.value = nOrder;
for (i=0; i<nElements; i++) {
oCurElem = oElements[i];
if (oCurElem.type == "text") {
n = parseInt(oCurElem.value, 10) || 0;
if (n >= nOrder && oCurElem != oInput) {
n++;
}
aElements[aElements.length] = { element: oCurElem, order: n };
}
}
aElements.sort(function(a, b) {
return a.order - b.order > 0? 1 : b.order - a.order == 0? 0 : -1;
});
for (i=0; i<aElements.length; i++) {
aElements[i].element.value = i + 1;
}
}
[...]
<form><p>
<input type="text" name="item0" value="1"
onchange="renumber(this)"> an item<br>
<input type="text" name="item1" value="2"
onchange="renumber(this)"> something else<br>
<input type="text" name="item2" value="3"
onchange="renumber(this)"> a differnt thing<br>
<input type="text" name="item3" value="4"
onchange="renumber(this)"> the other<br>
<input type="text" name="item4" value="5"
onchange="renumber(this)"> yougetthepicture<br>
</p></form>

ciao, dhgm

[juglesh]

sweet! works if you move an item down the list, but not up. I may be
able to use it as is if it cant be fixed. Would you(or anyone) mind
commenting the code?

Is there a js manual that is as good as the php.net manual?

Thank you very much for your time,
juglesh

[Dietmar Meier]

juglesh wrote:

works if you move an item down the list, but not up.

As I told, barely tested ... Here's another try, and again,
testing will be yours :-) Maybe it can be done easier, maybe
even much easier.

function renumber(oInput) {
var oFormElems, nFormElems, bUp, aElements, i, nCurOrder, oCurElem,
nNewOrder = parseInt(oInput.value, 10) || 0;
nOldOrder = parseInt(oInput.oldvalue, 10) || 0;
if ((bUp = nNewOrder - nOldOrder)) {
oFormElems = oInput.form.elements;
nFormElems = oFormElems.length,
aElements = [];
for (i=0; i<nFormElems; i++) {
oCurElem = oFormElems[i];
if (oCurElem.type == "text") {
nCurOrder = parseInt(oCurElem.value, 10) || 0;
if (oCurElem != oInput) {
if (bUp < 0 && nCurOrder >= nNewOrder) {
nCurOrder++;
}
else if (bUp > 0 && nCurOrder <= nNewOrder) {
nCurOrder--;
}
}
aElements[aElements.length] = { element: oCurElem, order: nCurOrder };
}
}
aElements.sort(function(a, b) {
return a.order - b.order > 0? 1 : b.order - a.order == 0? 0 : -1;
});
for (i=0; i<aElements.length; i++) {
aElements[i].element.value = i + 1;
}
}
}
[...]
<form><p>
<input type="text" name="item0" value="1"
onfocus="this.oldvalue=this.value"
onchange="renumber(this)"> an item<br>
<input type="text" name="item1" value="2"
onfocus="this.oldvalue=this.value"
onchange="renumber(this)"> something else<br>
<input type="text" name="item2" value="3"
onfocus="this.oldvalue=this.value"
onchange="renumber(this)"> a differnt thing<br>
<input type="text" name="item3" value="4"
onfocus="this.oldvalue=this.value"
onchange="renumber(this)"> the other<br>
<input type="text" name="item4" value="5"
onfocus="this.oldvalue=this.value"
onchange="renumber(this)"> yougetthepicture<br>
</p></form>

ciao, dhgm

[Dietmar Meier]

juglesh wrote:

works if you move an item down the list, but not up.

As I told, barely tested ... Here's another try, and again,
testing will be yours :-) Maybe it can be done easier, maybe
even much easier.

function renumber(oInput) {
var oFormElems, nFormElems, bUp, aElements, i, nCurOrder, oCurElem,
nNewOrder = parseInt(oInput.value, 10) || 0,
nOldOrder = parseInt(oInput.oldvalue, 10) || 0;
if ((bUp = nNewOrder - nOldOrder)) {
oFormElems = oInput.form.elements;
nFormElems = oFormElems.length,
aElements = [];
for (i=0; i<nFormElems; i++) {
oCurElem = oFormElems[i];
if (oCurElem.type == "text") {
nCurOrder = parseInt(oCurElem.value, 10) || 0;
if (oCurElem != oInput) {
if (bUp < 0 && nCurOrder >= nNewOrder) {
nCurOrder++;
}
else if (bUp > 0 && nCurOrder <= nNewOrder) {
nCurOrder--;
}
}
aElements[aElements.length] = { element: oCurElem, order: nCurOrder };
}
}
aElements.sort(function(a, b) {
return a.order - b.order > 0? 1 : b.order - a.order == 0? 0 : -1;
});
for (i=0; i<aElements.length; i++) {
aElements[i].element.value = i + 1;
}
}
}
[...]
<form><p>
<input type="text" name="item0" value="1"
onfocus="this.oldvalue=this.value"
onchange="renumber(this)"> an item<br>
<input type="text" name="item1" value="2"
onfocus="this.oldvalue=this.value"
onchange="renumber(this)"> something else<br>
<input type="text" name="item2" value="3"
onfocus="this.oldvalue=this.value"
onchange="renumber(this)"> a differnt thing<br>
<input type="text" name="item3" value="4"
onfocus="this.oldvalue=this.value"
onchange="renumber(this)"> the other<br>
<input type="text" name="item4" value="5"
onfocus="this.oldvalue=this.value"
onchange="renumber(this)"> yougetthepicture<br>
</p></form>

ciao, dhgm

[juglesh]

thank you very much, works great!

[juglesh]

works great, thanks again! I'm pretty amazed youre able to just write
that stuff off the top of your head with no testing or anything.

just to let anyone know, i'm using name="order[]" instead of
name="item1"etc. cuz i needed that for the code that takes this form.
works fine though.

[Thomas 'PointedEars' Lahn]

juglesh wrote:

Is there a js manual that is as good as the php.net manual?

Depends on what you mean by "good". Generally: No, since most of the
examples will be using host objects which are not part of the core
language but of the used AOMs/DOMs. See the FAQ.
PointedEars