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

Andy — Sun, 24 Jul 2011 07:33:20 +0000

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!

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

Bypass / Disable print dialog box in firefox with javascript print()

Andy — Sat, 01 Jan 2011 18:23:43 +0000

Just print!

In my ePoS system project, I have the need to open a popup with javascript and print the contents without seeing the dialog box.

Everywhere I searched, there were the ‘you don’t wanna do that because….’ from know it all keyboard warriors saying it was bad because evil doers could send porn to your printer.

What about intranets and web apps?

Finally, I figured it out and as long as you’re using Firefox and you have access to it then you’re ready to make it print without a nasty dialog…

Open firefox and put about:config in the address bar and press enter (you will need to click the button that shows to say you know what you’re doing)
Type print.always_print_silent in the filter box at the top
If you have an entry already there and it is set to false just right click it and choose ‘toggle’ to set it to true.
If there is no entry there already then follow on…
- right click the screen and choose New->boolean
- enter print.always_print_silent as the preference name when asked and press enter
- set boolean value to true and press enter

That’s it, you will no longer see the dialog box when you print. Beware though, it will try to print to the last printer you used when you had the dialog box open. If you ever need to change it then you will need to toggle the value for print.always_print_silent by following the above steps.

Open a javascript popup and print the contents

Now you can print without dialogs, you can use the following code to open a popup window and print it.

open the popup

windowname = window.open('url.html','name',options);

the options you have available are:

Option	Values	Description
location	yes\|no	Does the location bar show?
menubar	yes\|no	Does the menubar show?
scrollbars	yes\|no	Do scrollbars show?
status	yes\|no	Does the status bar show\|
titlebar	yes\|no	Does the titlebar show?
toolbar	yes\|no	Does the toolbar show?
resizable	yes\|no	Can you resize the window?
height	pixels	height of window
width	pixels	width of window
directories	yes\|no	Does the personal toolbar show?
innerHeight	pixels	specifies the inner height of window
innerWidth	pixels	specifies the inner width of window
screenX	pixels	specifies distance from left edge of screen
screenY	pixels	specifies distance from top edge of screen

For example, to open a pop window showing the file called example.html with no menu bar, with a width of 430 pixels, height of 700 pixels, no toolbar, with scrollbars and with the window you would use this command

winname = window.open('/example.html','newwin','menubar=no,width=430,height=700,toolbar=no,scrollbars=yes,screenX=300');

To close that window, you can add this

winname.close();

To print the window, you can add this to the example.html page

self.print();

or to print it from the calling page, you might need to pause for a little while before issuing the print command so it has time to load the page content first..

setTimeout("winname.window.print();",500);

All the commands need to be within

FiddyP » Code