1

I am working on a survey to send out to customers. One of the questions asks customers to sort their preferences from 1 to 7. I have the html done and this is what it looks like. 

<div class="row">
        <!--begin-->
        <div class="q1 col-xs-offset-3 col-xs-10">
            <p class="question">2) What benefits are most important to you? (Please rank 1-7)</p>
            <ol>
                <li id="q2-node-1" class="selection"><b>Option 1</b>
                    <input type="hidden" value="Option 1" name="q2">
           <span class="dropdown pull-right">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Move To <i class="caret"></i>
              </a>
             <ul class="dropdown-menu">
                 <li><a href="#1" data-to="1" data-move="#q2-node-1">Priority 1</a></li>
                 <li><a href="#2" data-to="2" data-move="#q2-node-1">Priority 2</a></li>
                 <li><a href="#3" data-to="3" data-move="#q2-node-1">Priority 3</a></li>
                 <li><a href="#4" data-to="4" data-move="#q2-node-1">Priority 4</a></li>
                 <li><a href="#5" data-to="5" data-move="#q2-node-1">Priority 5</a></li>
                 <li><a href="#6" data-to="6" data-move="#q2-node-1">Priority 6</a></li>
                 <li><a href="#7" data-to="7" data-move="#q2-node-1">Priority 7</a></li>
             </ul>
                 </span>
                </li>
                <li id="q2-node-2" class="selection"><b>Option 2</b>
                    <input type="hidden" value="Option 2" name="q2">
           <span class="dropdown pull-right">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Move To <i class="caret"></i>
              </a>
             <ul class="dropdown-menu">
                 <li><a href="#1" data-to="1" data-move="#q2-node-2">Priority 1</a></li>
                 <li><a href="#2" data-to="2" data-move="#q2-node-2">Priority 2</a></li>
                 <li><a href="#3" data-to="3" data-move="#q2-node-2">Priority 3</a></li>
                 <li><a href="#4" data-to="4" data-move="#q2-node-2">Priority 4</a></li>
                 <li><a href="#5" data-to="5" data-move="#q2-node-2">Priority 5</a></li>
                 <li><a href="#6" data-to="6" data-move="#q2-node-2">Priority 6</a></li>
                 <li><a href="#7" data-to="7" data-move="#q2-node-2">Priority 7</a></li>
             </ul>
                 </span>
                </li>
                <li id="q2-node-3" class="selection"><b>Option 3</b>
                    <input type="hidden" value="Option 3" name="q2">
           <span class="dropdown pull-right">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Move To <i class="caret"></i>
              </a>
             <ul class="dropdown-menu">
                 <li><a href="#1" data-to="1" data-move="#q2-node-3">Priority 1</a></li>
                 <li><a href="#2" data-to="2" data-move="#q2-node-3">Priority 2</a></li>
                 <li><a href="#3" data-to="3" data-move="#q2-node-3">Priority 3</a></li>
                 <li><a href="#4" data-to="4" data-move="#q2-node-3">Priority 4</a></li>
                 <li><a href="#5" data-to="5" data-move="#q2-node-3">Priority 5</a></li>
                 <li><a href="#6" data-to="6" data-move="#q2-node-3">Priority 6</a></li>
                 <li><a href="#7" data-to="7" data-move="#q2-node-3">Priority 7</a></li>
             </ul>
                 </span>
                </li>
                <li id="q2-node-4" class="selection"><b>Option 4</b>
                    <input type="hidden" value="Option 4" name="q2">
           <span class="dropdown pull-right">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Move To <i class="caret"></i>
              </a>
             <ul class="dropdown-menu">
                 <li><a href="#1" data-to="1" data-move="#q2-node-4">Priority 1</a></li>
                 <li><a href="#2" data-to="2" data-move="#q2-node-4">Priority 2</a></li>
                 <li><a href="#3" data-to="3" data-move="#q2-node-4">Priority 3</a></li>
                 <li><a href="#4" data-to="4" data-move="#q2-node-4">Priority 4</a></li>
                 <li><a href="#5" data-to="5" data-move="#q2-node-4">Priority 5</a></li>
                 <li><a href="#6" data-to="6" data-move="#q2-node-4">Priority 6</a></li>
                 <li><a href="#7" data-to="7" data-move="#q2-node-4">Priority 7</a></li>
             </ul>
                 </span>
                </li>
                <li id="q2-node-5" class="selection"><b>Option 5</b>
                    <input type="hidden" value="Option 5" name="q2">
           <span class="dropdown pull-right">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Move To <i class="caret"></i>
              </a>
             <ul class="dropdown-menu">
                 <li><a href="#1" data-to="1" data-move="#q2-node-5">Priority 1</a></li>
                 <li><a href="#2" data-to="2" data-move="#q2-node-5">Priority 2</a></li>
                 <li><a href="#3" data-to="3" data-move="#q2-node-5">Priority 3</a></li>
                 <li><a href="#4" data-to="4" data-move="#q2-node-5">Priority 4</a></li>
                 <li><a href="#5" data-to="5" data-move="#q2-node-5">Priority 5</a></li>
                 <li><a href="#6" data-to="6" data-move="#q2-node-5">Priority 6</a></li>
                 <li><a href="#7" data-to="7" data-move="#q2-node-5">Priority 7</a></li>
             </ul>
                 </span>
                </li>
                <li id="q2-node-6" class="selection"><b>Option 6</b>
                    <input type="hidden" value="Option 6" name="q2">
           <span class="dropdown pull-right">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Move To <i class="caret"></i>
              </a>
             <ul class="dropdown-menu">
                 <li><a href="#1" data-to="1" data-move="#q2-node-6">Priority 1</a></li>
                 <li><a href="#2" data-to="2" data-move="#q2-node-6">Priority 2</a></li>
                 <li><a href="#3" data-to="3" data-move="#q2-node-6">Priority 3</a></li>
                 <li><a href="#4" data-to="4" data-move="#q2-node-6">Priority 4</a></li>
                 <li><a href="#5" data-to="5" data-move="#q2-node-6">Priority 5</a></li>
                 <li><a href="#6" data-to="6" data-move="#q2-node-6">Priority 6</a></li>
                 <li><a href="#7" data-to="7" data-move="#q2-node-6">Priority 7</a></li>
             </ul>
                 </span>
                </li>
                <li id="q2-node-7" class="selection"><b>Option 7</b>
                    <input type="hidden" value="Option 7" name="q2">
           <span class="dropdown pull-right">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Move To <i class="caret"></i>
              </a>
             <ul class="dropdown-menu">
                 <li><a href="#1" data-to="1" data-move="#q2-node-7">Priority 1</a></li>
                 <li><a href="#2" data-to="2" data-move="#q2-node-7">Priority 2</a></li>
                 <li><a href="#3" data-to="3" data-move="#q2-node-7">Priority 3</a></li>
                 <li><a href="#4" data-to="4" data-move="#q2-node-7">Priority 4</a></li>
                 <li><a href="#5" data-to="5" data-move="#q2-node-7">Priority 5</a></li>
                 <li><a href="#6" data-to="6" data-move="#q2-node-7">Priority 6</a></li>
                 <li><a href="#7" data-to="7" data-move="#q2-node-7">Priority 7</a></li>
             </ul>
                 </span>
                </li>
            </ol>
        </div>
    </div>

The idea of this question is that the left side will display the options for them to sort. The right side will display a dropdown link that has priority 1-7 listed out. The customer will select what position they would like the option to appear at and the option will move to that position. I am using Javascript to get this done. I have it working for the most part and here is the code. 

$(function () {
// helper function to change jQuery's array data to something uniform.
function formToJSON(data) {
    var index = {};

    $.map(data, function (n, i) {
        if (!index.hasOwnProperty(n['name'])) index[n['name']] = [];
        index[n['name']].push(n["value"])
    });

    return index
}

$("[data-move]").bind("click tap", function (e) {
    e.preventDefault(); // stop <a> from changing the page
    var $tar = $($(this).data("move")); // moving this <li>
    var $position = parseInt($(this).data("to")); // position to move to;
    var list = $tar.parent("ol").children("li"); // all <li> in parent <ol>
    var $subject = list[$position-1]; // the <li> we are placing it above

    $tar.fadeOut(600, function(){
        if ($position >= list.length) {
            // there is nothing to insert before so
            // insert at the bottom of the list
            $tar.insertAfter(list[list.length-1]);
        }
            $tar.insertBefore($subject) // insert this <li> before the position

        $tar.fadeIn(1000);
    });
});

// catch form submit to show serialization of sort order
$("form").bind("submit", function (e) {
    e.preventDefault(); // stop <form> from submitting
    var data = $(this).serializeArray(); // get form data as an array
    console.log("submitting", formToJSON(data))
});

It is working for the most part. The problem I am having is that when I select Priority 3 for example on any one of them it moves to Option 2 instead of Option 3. It does that for all of them except 1 and 7. If Priority 1 is selected it moves to Option 1 as it is supposed to. Similarly, if Priority 7 is selected it moves to Option 7 as it is supposed to. But all the others move to the option prior to the option it is actually supposed to move to.

Improve this question
1
  • Then it's called a JavaScript unfunction! Commented Jul 28, 2015 at 2:41

3 Answers 3

Reset to default
1

Because you're using insertbefore when you press 'Priority 3' it inserts it before the third index in the list. Essentially when moving something down in Priority you want to use insertafter and when moving up in the list you'll want to use insertbefore

Hope this helps :)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

When you move the top item in a list down to spot 4, you want

2,3,4,1,5,6,7

(insert 1 after 4)

When you move the bottom item in a list up to spot 4, you want

1,2,3,7,4,5,6

(insert 7 before 4)

You'll need to know the index of the item that's being moved. Then, what TomDillinger said:

var $index = index of the item contained in $subject;
if ($index < $position) {
  $tar.insertAfter($subject);
} else {
  $tar.insertBefore($subject);
}
Improve this answer

Comments

0

FYI: Here is the solution I came up with using the help provided above. 

var random = function () {
    var list = $(".selection"); // An array of nodes

    for (i = 0; i < list.length; i += 1) {
        var random = Math.floor(Math.random() * list.length); // generates a random number less than or equal to the length of the array
        var insert = list.splice(i, 1);
        list.splice(random, 0, insert[0]);
    }

    $("#q2").html(list);

}
random();

$("[data-move]").bind("click tap", function sort(e) {
    e.preventDefault(); // stop <a> from changing the page
    var $tar = $($(this).data("move")); // moving this <li>
    var $position = parseInt($(this).data("to")); // position to move to;
    var list = $tar.parent("ol").children("li"); // all <li> in parent <ol>
    var $subject = list[$position-1]; // the <li> we are placing it above
    var current = $(this).parents(".selection").attr("id"); // id of the current position
    var cur_index = 0; // ids array index of current position
    var ids = []; // array of ids in the given question

    $tar.fadeOut(600, function(){
        // Create parallel array to determine if move position is higher or lower than current position
        for (i = 0; i < list.length; i += 1) {
            ids.push(list[i].id);
        }
        cur_index = ids.indexOf(current);

        if ($position >= list.length) {
            // there is nothing to insert before so
            // insert at the bottom of the list
            $tar.insertAfter(list[list.length-1]);
        } else if (cur_index <= $position-1) {
            $tar.insertAfter($subject);
        } else {
            $tar.insertBefore($subject); // insert this <li> before the position
        }

        $tar.fadeIn(1000);
    });
});

I also added a randomize function so all of the list elements will be random each time the survey is loaded.

Thank you for the help.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.