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

Discussion in 'Javascript' started by juglesh, Apr 25, 2005.

  1. juglesh

    juglesh Guest

    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
     
    juglesh, Apr 25, 2005
    #1
    1. Advertising

  2. 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;
    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
     
    Dietmar Meier, Apr 26, 2005
    #2
    1. Advertising

  3. juglesh

    juglesh Guest

    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
     
    juglesh, Apr 26, 2005
    #3
  4. 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;
    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
     
    Dietmar Meier, Apr 26, 2005
    #4
  5. 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;
    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
     
    Dietmar Meier, Apr 26, 2005
    #5
  6. juglesh

    juglesh Guest

    thank you very much, works great!
     
    juglesh, Apr 27, 2005
    #6
  7. juglesh

    juglesh Guest

    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.
     
    juglesh, Apr 27, 2005
    #7
  8. 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
     
    Thomas 'PointedEars' Lahn, May 8, 2005
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. divya
    Replies:
    1
    Views:
    1,121
    Munna
    May 28, 2008
  2. member thudfoo

    using the netflix api

    member thudfoo, Jul 5, 2010, in forum: Python
    Replies:
    0
    Views:
    302
    member thudfoo
    Jul 5, 2010
  3. Mike Wilson

    [Semi-OT] http connecting to netflix

    Mike Wilson, Jan 8, 2004, in forum: Ruby
    Replies:
    1
    Views:
    136
    Thomas Fini Hansen
    Jan 8, 2004
  4. Domenico Discepola

    multi-field array sort using Sort::Fields method

    Domenico Discepola, Apr 27, 2004, in forum: Perl Misc
    Replies:
    6
    Views:
    319
    Uri Guttman
    Apr 28, 2004
  5. Select boxes to select sets

    , Sep 14, 2005, in forum: Javascript
    Replies:
    5
    Views:
    111
    Dr John Stockton
    Sep 17, 2005
Loading...

Share This Page