Home/ Questions/Q 7587881
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T19:47:08+00:00

I have a problem. I would like to be able to sort the list.

  • 0

I have a problem. I would like to be able to sort the list. I made this script, but “sortable” doesn’t work. Why?

<html>
<script type="text/javascript">
        var count = 1;
        $(function(){
            $('#add_item').click(function(){
                count++;
                $('#container').append('<li id="item_' + count +'">' + count + '° posto: '+ '<input type="text" id="item_' + count + '" name="items[]" type="text" /><input type="submit" class="del_item" value="Elimina" /><br /></li>');
                return false;
            });
            $('form').on('click', '.del_item', function(){
                count--;
                $(this).parent().remove();
                return false;
            });
            $('#container').sortable();
        });
    </script>


<ul id="container">
            <li id="item_1">1° posto: <input type="text" id="item_1" name="items[]" />
            <input type="submit" class="del_item" value="Elimina" /><br /></li>
        </ul>
        <input type="submit" name="add_item" id="add_item" value="Aggiungi" /><br />

</html>

Could you help me, please?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In the above code, you haven’t included the jquery and jquery-ui libraries. For example, put the following in the <head> section of your page:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

    Also, you should add <head> and <body> tags around the appropriate content, so your page would look more like this:

    <html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var count = 1;
        $(function(){
            $('#add_item').click(function(){
                count++;
                $('#container').append('<li id="item_' + count +'">' + count + '° posto: '+ '<input type="text" id="item_' + count + '" name="items[]" type="text" /><input type="submit" class="del_item" value="Elimina" /><br /></li>');
                return false;
            });
            $('form').on('click', '.del_item', function(){
                count--;
                $(this).parent().remove();
                return false;
            });
            $('#container').sortable();
        });
    </script>
</head>

<body>   
    <ul id="container">
        <li id="item_1">1° posto: <input type="text" id="item_1" name="items[]" />
        <input type="submit" class="del_item" value="Elimina" /><br /></li>
    </ul>
    <input type="submit" name="add_item" id="add_item" value="Aggiungi" /><br />
</body>
</html>
    • 0