Geek Answers Handbook

Radio buttons not selected when dragging item using jQuery sorters

I use the jQuery UI sortables plugin to allow reordering of some list items. Inside each list item, I have a couple of radio buttons that let you enable or disable the item.

When an item is dragged, both switches are turned off, which is not like this should happen. This is the right behavior, and if not, what is the best way to get around this?

Here is a sample code 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 the list item is captured with the mouse, both radio buttons will be canceled.

If this is a mistake, one way would be to automatically select the “enabled” switch when the item moves, so any advice on how to achieve this will also be most valuable.

Update: I tested this on FireFox 3, Internet Explorer 7, Opera 9.5 and Safari 3.1.2, all on Windows XP x64, and this problem occurs in all of them.

+6
jquery jquery-ui radio-button jquery-ui-sortable drag-and-drop
source share
6 answers

This may not be exactly what you are looking for, but a change

 $('#itemlist').sortable();

to

 $('#itemlist').sortable({placeholder: ".items li"});

saves switch selection.

+1
source share

UPDATE: This is applicable for jQuery.ui 1.5.2. If you are using 1.6rc2, try Ben Koehler's solution.

The sortables plugin seems to clone node. If we clone nodes using $('#itemlist li').clone().appendTo("#itemlist"); , we will see a similar behavior, because now there are 4 switches with the same name, not two.

You can override the way the sortables plugin works with the helper option. Try the following:

 $('#itemlist').sortable({helper: function(){ return $("<li>").css({border: "1px solid red", background: "transparent"}).appendTo("#itemlist")[0]; }});

We create a new node without switches and add 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 the switch settings in their default state.

+1
source share

Is it in Internet Explorer? It is known that IE will lose the choice of flags and radios when copying / moving.

http://webbugtrack.blogspot.com/2007/11/bug-299-setattribute-checked-does-not.html

defaultChecked must be reset for IE to behave

0
source share

some answer to radio buttons that are losing their status is here http://core.trac.wordpress.org/ticket/16972#commentrige

it's a bit of a long way, but only the way I could find to restore the status of the radio buttons after being dragged somewhere.

0
source share

I had the same problems, but I found a solution here: http://fiddyp.co.uk/how-to-fix-radio-inputs-losing-focus-when-dragging-a-jquery-ui-sortable-div / This seems to allow me to drag the rows of the table, and the switches stay in place correctly.

 // global script for commentluv premium settings pages // workaround for bug that causes radio inputs to lose settings when meta box is dragged. // http://core.trac.wordpress.org/ticket/16972 jQuery(document).ready(function(){ // listen for drag drop of metaboxes , bind mousedown to .hndle so it only fires when starting to drag jQuery('.hndle').mousedown(function(){ // set event listener for mouse up on the content .wrap and wait a tick to give the dragged div time to settle before firing the reclick function jQuery('.wrap').mouseup(function(){store_radio(); setTimeout('reclick_radio();',50);}); }) }); /** * stores object of all radio buttons that are checked for entire form */ function store_radio(){ var radioshack = {}; jQuery('input[type="radio"]').each(function(){ if(jQuery(this).is(':checked')){ radioshack[jQuery(this).attr('name')] = jQuery(this).val(); } jQuery(document).data('radioshack',radioshack); }); } /** * detect mouseup and restore all radio buttons that were checked */ function reclick_radio(){ // get object of checked radio button names and values var radios = jQuery(document).data('radioshack'); //step thru each object element and trigger a click on it corresponding radio button for(key in radios){ jQuery('input[name="'+key+'"]').filter('[value="'+radios[key]+'"]').trigger('click'); } // unbind the event listener on .wrap (prevents clicks on inputs from triggering function) jQuery('.wrap').unbind('mouseup'); }
0
source share

Like Randy, the best solution I found was to store the checked property in another attribute, and then, after moving it, the checked property will return to the radio input. I did it in a simpler way, using the sorted start and stop options, as it should.

 // First, create a function to store the properties. // Store the checked radio properties function gravaSelecoes() { $("tbody.linhasConf").find("input:radio").each(function () { if ($(this).prop("checked")) $(this).attr("data-checked", "true"); else $(this).attr("data-checked", "false"); }); } // Then, create a function that restore the properties // Restore the checked radio properties function atualizaSelecoes() { $("tbody.linhasConf").find("input:radio").each(function () { if ($(this).attr("data-checked") == "true") $(this).prop("checked", true); else $(this).prop("checked", false); }); } // And when declaring sortables, refer to those functions $('tbody.linhasConf').sortable({ start: gravaSelecoes, stop: atualizaSelecoes }).disableSelection();

Rodrigo

0
source share

More articles:


All Articles