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

J

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
 
D

Dietmar Meier

juglesh said:
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;
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.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
 
J

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
 
D

Dietmar Meier

juglesh said:
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;
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.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
 
D

Dietmar Meier

juglesh said:
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;
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.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
 
J

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.
 
T

Thomas 'PointedEars' Lahn

juglesh said:
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top