Two jQuery/JavaScript functions not being called

Question

I have a working MVC application which consist of two listboxes and buttons to various things to the listbozes. All of my jQuery functions in the following script execute correctly except for MoveUp and MoveDown which are never called (set breakpoints). The F12 Console is clean and there are no JavaScript errors. The two buttons in question are:

  <button type="button" id="up" onclick="MoveUp()">Up</button>

    <button type="button" id="down" onclick="MoveDown()">Down</button>

The jQuery code is as follows. Does the MoveUp and MoveDown functions need to be inside the "global" function?

<script src="~/Scripts/jquery-2.1.1.js"></script>   
    <script>
        $(function () {
            $("#add").click(function () {
                $("#listBoxAvail > option:selected").each(function () {
                    $(this).remove();
                    val = $(this).val();
                    temp = $(this);
                    temp.val('L' + val)
                    $(temp).appendTo("#listBoxSel");
                });
            });

            $("#remove").click(function () {
                $("#listBoxSel > option:selected").each(function () {
                    $(this).remove().appendTo("#listBoxAvail");
                });
            });

            $("#remove-all").on("click", function(event) {
                $('#listBoxSel option').prop('selected', true);
                $("#remove").trigger("click");
            });

            $("#select-all").on("click", function(event) {
                $('#listBoxAvail  option').prop('selected', true);
                $("#add").trigger("click");
            });
        });

        function MoveDown() {

            var selectedOption = $('#listBoxSel > option[selected]');

            var nextOption = $('#lstBoxSel > option[selected]').next("option");

            if ($(nextOption).text() != "") {

                $(selectedOption).remove();

                $(nextOption).after($(selectedOption));

            }

        }

        function MoveUp() {

            var selectedOption = $('#lstBoxSel > option[selected]');

            var prevOption = $('#lstBoxSel > option[selected]').prev("option");

            if ($(prevOption).text() != "") {

                $(selectedOption).remove();

                $(prevOption).before($(selectedOption));

            }

`Does the MoveUp and MoveDown functions need to be inside the "global" function?` No, shouldn't need to be. To be honest, I can't spot what could be causing it judging by that code alone. — , Oct 28 '14 at 15:51
Verify the functions are accessible by firing up developer tools and calling `MoveDown()` from the console. — , Oct 28 '14 at 15:52

score 2 · Accepted Answer · answered Oct 28 '14 at 16:03

You're saying that "MoveUp and MoveDown are never called ", but the "console is clean and there are no JavaScript errors." That does mean the function is being called, else, you would see an error undefined is not a function.

So, with that information, we can guess the error is in your function. Since you use jQuery, when the jQuery object is empty, it will fail silently (no error).

I don't have access to your HTML, so i am only guessing here, but you are using a select element and use this selector option[selected]. You are probably trying the get the selected element but this does not do what you want. It select the option that has the attribute selected. Your HTML probably doesn't have it.

What you want to use is :selected : It will get the selected option. Use that :

function MoveDown() {

    var selectedOption = $('#listBoxSel > option:selected');
    var nextOption = selectedOption.next("option");

    if ($(nextOption).text() != "") {

        $(selectedOption).remove();

        $(nextOption).after($(selectedOption));

    }

}

This is it! MoveDown now works! Can you please show the code for MoveUp? Thanks — user2471435, Oct 28 '14 at 16:13
Ah was just about to explain this, nicely done. @user2471435 Anyway here was my optimization for it http://jsfiddle.net/davobkrk/. No need to wrap the selectors again and I changed the remove to [detach()](http://api.jquery.com/detach/) Also note that you misspelled `#listBoxSel` in your selector in the MoveUp function. That's why it's not working — Spokey, Oct 28 '14 at 16:16

score 0 · Answer 2 · answered Oct 28 '14 at 15:54

0

Use this:

$("#up").on("click", MoveDown);

More details here:

answered Oct 28 '14 at 15:54

Amiga500

5,874
10
64
117

My answer is a valid one, and it shows how to attach event handler. Why it is downvoted? – Amiga500 Oct 29 '14 at 08:29

Two jQuery/JavaScript functions not being called

2 Answers2