Menu
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?
738
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
