How to fix radio inputs losing focus when dragging a jquery ui sortable div

July
24

hows that for a descriptive title eh? haha, that’s the exact term I used when I ran into trouble with some wordpress meta boxes on a custom admin page I was making for the new CommentLuv. I am using the WordPress functions for add_meta_box to add, you guessed it, meta boxes to a settings page.

Draggable killed the radio bar

ok, lame Queen song title parody I know but it’s true. I had a bar of radio buttons in one of those meta boxes and if I dragged and dropped the box to a new place, it lost it’s radio button dots!

When I dropped the sortable meta box, the happy little dot in the radio input would disappear which messed things up when I saved the settings because the form would not have a radio input with a status of checked any more. :-(

jQuery rescues jQuery!

jQuery is frickin awesome and I love it. It’s the sole reason CommentLuv was able to become the plugin it is today. It’s also sometimes a little finicky and it does things in a particular way which causes some mild issues. This is one of them, it’s all due to jQuery cloning the contents of the sortable box when you drag it and then when you drop it, the radio button loses it’s happy little dot.

I did a mammoth amount of searching and could only find 2 instances of it happening elsewhere (here and here) and both instances said it was a bug/feature and didn’t provide a solution.

Geek me up, I’m goin in!

[youtube clip_id="Z9_jIa2WADc"/]

As a means to procrastinate, an unhealthily strong stubbornness bone and a burning sensation in my pants whenever I can’t do something that I want to do, I set about trying some code to re click the radio buttons after the meta box had been dropped after dragging.

Here it is, I hope you find it useful! (change the two instances of .wrap to whatever container your sortables are in)

// 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's 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');
}

ajax, Code, jquery, PHP


6 Comments zu “How to fix radio inputs losing focus when dragging a jquery ui sortable div”

  1. Shivam Garg
    02.08.11 8:20 pm

    Hi Andy,
    This is really very good and informative article. This is very helpful for the neophytes in designing. Thanks for the information.
    Shivam Garg recently posted..Inmotion hosting CouponMy Profile

    #1

  2. Olivier
    09.08.11 5:29 pm

    waouh, the new ComLuv is GREAT !
    Olivier recently posted..10 astuces pour monter sa boƮte sans se ruinerMy Profile

    #2

  3. James
    09.08.11 11:03 pm

    I, too, came following the mailer on the updated CommentLuv. I’m pretty impressed… curious, will you add something about the “DoFollow if you tweet/like/+1″ characteristics to the display for the user?

    Also curious if you could load the list of ten in the background to speed things up, or if that’s an intentional feature to reduce load for users that aren’t going to Like anyways.
    James recently posted..Snails on the BeachMy Profile

    #3

  4. Andy
    10.08.11 7:57 pm

    Hi James,
    the options allow you to customize the message for the social enticements. I don’t currently have dofollow on for those things so I didn’t set the message to say it but it is very easy to do.
    I don’t fetch in the background because there’s no point unless the user has taken action which many don’t.

    #4

  5. Office Furniture 123
    25.08.11 9:45 am

    The scripts seem to perform nicely, was a bit concerned about that. Thanks for sharing. Is there any reason to use jQuery instead of $ or is just personal preference?

    #5

  6. Andy
    25.08.11 10:27 am

    Hi , I usually use jQuery instead of $ just for compatibility in case there are other scripts using $ like scriptaculous and it saves me having to remember which is the latest bestest way of using no_conflict
    Andy recently posted..Guest blogging brings great results at ComLuv.comMy Profile

    #6

Your Comment

CommentLuv badge