post formats - how to switch meta boxes when changing format?

Question

Problem

After realizing that post formats are pretty popular, but only a extremly rough drawn concept, i see that users will run into possible traps.

Post format ...

• uses post meta fields & user doesn't remember exact meta key name.
• takes the link/embed/whatever object from post editor & user inputs wrong data.

Both are examples of possible traps a user could hit.

Idea

The post format has a custom meta box that does only allow to input the expected data.

The idea itself isn't that bad, but there's still the problem that the user would have to

• put data into the correct meta box
• then select the according post format.

Question

What i'm searching for is

• a solution that switches (ajax) the meta box (or just its content) based on the selection a user makes inside the post formats meta box

OR...

• using a ajax/jquery-ui tabs inside the meta box to switch meta box contents and save the according post format on 'save_post'

Note:
I'm not searching for the exact meta box content. My most interesst is to see the 'surroundings' in different code examples.

Thank you!

Answer 1

I did something like this once, but when you clicked on a certain category (essentially the same) It certainly isn't a true ajax solution, it just hides and reveals the div with the settings, but It is a solution which works. You'll definitely have to modify this for your needs, but if you have a grasp on jQuery, I'm sure you'll be able to modify this for your needs. If you are a little more specific about your needs, I'd be happy to edit this up to suit what you are looking for more exactly.

The Code:

I used this in a plugin, but you can just put this into your theme's functions.php

function customadmin_testimonial() {
    if ( is_admin() ) {
        $script = <<< EOF
<script type='text/javascript'>
    jQuery(document).ready(function($) {
        $('#testimonial-information').hide();
        $('#in-category-3').is(':checked') ? $("#testimonial-information").show() : $("#testimonial-information").hide();
        $('#in-category-3').click(function() {
            $("#testimonial-information").toggle(this.checked);
        });
    });
</script>
EOF;
        echo $script;
    }
}
add_action('admin_footer', 'customadmin_testimonial');

Basically what you have here is a jQuery script that initially hides a meta box that I have already set up. The box's ID is #testimonial-information. Then it checks on whether or not the specific category's box is checked, and if it is, shows it. Then it listens for a click on the specific category's box and toggles it's visibility.

The Result:

A meta box that is visible only when the user has chosen a specific category. All you'll need to do is set up your metaboxes and get all the ID's of the elements you need. You'll need the ID's of the metaboxes as well as the checkboxes in question. Then all you need to do is follow this formula to get what you are looking for.

If you have everything set up but are having a hang-up writing the javascript, just provide me the ID's of the metaboxes and corresponding checkboxes and I'd be more than happy to write it up for you.

Answer 2

This is the final javascript function. It should be hooked into admin_footer hook.

/**
 * jQuery show/hide for meta box, post editor meta box
 * 
 * Hides/Shows boxes on demand - depending on your selection inside the post formats meta box
 */
function wpse14707_scripts()
{
    wp_enqueue_script( 'jquery' );

    $script = '<<< EOF
    <script type="text/javascript">
        jQuery( document ).ready( function($)
            {
                $( "#post_format_box" ).addClass( "hidden" );

                $( "input#post-format-0" ).change( function() {
                    $( "#postdivrich" ).removeClass( "hidden" );
                    $( "#post_format_box" ).addClass( "hidden" );
                } );

                $( "input:not(#post-format-0)" ).change( function() {
                    $( "#postdivrich" ).addClass( "hidden" );
                    $( "#post_format_box" ).removeClass( "hidden" );
                } );

                $( "input[name=\"post_format\"]" ).click( function() {
                    var mydiv = $(this).attr( "id" ).replace( "post-format-", "" );
                    $( "#post_format_box div.inside div" ).addClass("hidden");
                    $( "#post_format_box div.inside div#"+mydiv).removeClass( "hidden" );
                } );
            }
        );
    </script>
    EOF';

    return print $script;
}
add_action( 'admin_footer', 'wpse14707_scripts' );