Menu
I'm using the jQuery UI sortables plugin to allow re-ordering of some list items. Inside each list item, I've got a couple of radio buttons which allow the item to be enabled or disabled.
When the item is dragged, both radio buttons get deselected, which doesn't seem like it should be happening. Is this correct behavior, and if not, what is the best way to work around this?
Here is a code sample demonstrating this problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery Sortables Problem</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
.items
{
margin-top: 30px;
margin-left: 0px;
padding-left: 25px;
cursor: move;
}
.items li
{
padding: 10px;
font-size: 15px;
border: 1px solid #666;
background: #eee;
width: 400px;
margin-bottom: 15px;
float: left;
clear:both;
}
</style>
</head>
<body>
<ol id="itemlist" class="items">
<li id="1" class="item">
Item 1
<input name="status_1" type="radio" value="1" checked="checked" />enabled
<input name="status_1" type="radio" value="0" />disabled
</li>
<li id="2" class="item">
Item 2
<input name="status_2" type="radio" value="1" checked="checked" />enabled
<input name="status_2" type="radio" value="0" />disabled
</li>
<li id="3" class="item">
Item 3
<input name="status_3" type="radio" value="1" checked="checked" />enabled
<input name="status_3" type="radio" value="0" />disabled
</li>
<li id="4" class="item">
Item 4
<input name="status_4" type="radio" value="1" checked="checked" />enabled
<input name="status_4" type="radio" value="0" />disabled
</li>
</ol>
<script type="text/javascript">
$('#itemlist').sortable();
</script>
</body>
</html>
As soon as a list item is grabbed with the mouse, both the radio buttons get deselected.
If this is a bug, one workaround would be to automatically select the 'enabled' radio button when the item is moved, so any advice on how to achieve this would also be most appreciated.
Update: I've tested this in FireFox 3, Internet Explorer 7, Opera 9.5, and Safari 3.1.2, all on Windows XP x64, and this issue occurs in all of them.
368
It may not be exactly what you're looking for, but changing
$('#itemlist').sortable();
to
$('#itemlist').sortable({placeholder: ".items li"});
keeps the radio button selections.
200
UPDATE: This applies for jQuery.ui 1.5.2. If you are using 1.6rc2 try Ben Koehler solution.
It seems that the sortables plugin clones the node being moved. If we clone the nodes using $('#itemlist li').clone().appendTo("#itemlist"); we'll see a similar behavior, because now there are 4 radio buttons with the same name, instead of two.
You can override the way the sortables plugin works with the helper option. Try this:
$('#itemlist').sortable({helper: function(){
return $("<li>").css({border: "1px solid red", background: "transparent"}).appendTo("#itemlist")[0];
}});
We are creating a new node without radio buttons and appending it to the list. This new node will be the one that is animated.
This code works fine in FF3 and Chrome, but IE7 keeps reseting the radio buttons to its default state.
34
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
