Categorie ‘jquery’ » Archiv


6

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