Last active
February 21, 2019 13:31
-
-
Save JPry/184506fd72999b82e590 to your computer and use it in GitHub Desktop.
A Sample CMB2 metabox with fields that show/hide based on other fields. In action: http://screencast.com/t/sXJ9rpOS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Either create a new empty object, or work with the existing one. | |
window.JPry_CMB2 = window.JPry_CMB2 || {}; | |
(function( window, document, $, app, undefined ) { | |
'use strict'; | |
// Cache specific objects from the DOM so we don't look them up repeatedly. | |
app.cache = function() { | |
app.$ = {}; | |
app.$.select = $( document.getElementById( 'jpry_sample_selection' ) ); | |
app.$.field = $( document.getElementById( 'jpry_extra_field' ) ); | |
app.$.field_container = app.$.field.closest( '.cmb-row'); | |
}; | |
app.init = function() { | |
// Store/cache our selectors | |
app.cache(); | |
// Show the custom container when the selection is 'show-field' | |
app.$.select.on( 'change', function( event ) { | |
if ( 'show-field' === $(this).val() ) { | |
app.$.field_container.show(); | |
} else { | |
app.$.field_container.hide(); | |
} | |
} ).trigger( 'change' ); | |
}; | |
$( document ).ready( app.init ); | |
})( window, document, jQuery, JPry_CMB2 ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Plugin Name: CMB2 Conditional Hide/Show example | |
* Plugin URI: https://gist.github.com/JPry/184506fd72999b82e590 | |
* Description: Show an example of using JS to hide and show CMB2 fields based on other fields. | |
* Version: 1.0.0 | |
* Author: Jeremy Pry | |
* Author URI: http://jeremypry.com/ | |
* License: GPL2 | |
*/ | |
// Prevent direct access to this file | |
if ( ! defined( 'ABSPATH' ) ) { | |
die( "You can't do anything by accessing this file directly." ); | |
} | |
add_action( 'cmb2_admin_init', 'jpry_cmb2_init' ); | |
/** | |
* Register CMB2 metabbox and fields. | |
*/ | |
function jpry_cmb2_init() { | |
$cmb = new_cmb2_box( array( | |
'id' => 'jpry_sample_box', | |
'title' => __( 'JPry Sample Meta Box', 'jpry' ), | |
'object_types' => array( 'post' ), | |
) ); | |
$cmb->add_field( array( | |
'name' => __( 'Sample Selection Drop-Down', 'jpry' ), | |
'id' => 'jpry_sample_selection', | |
'desc' => __( 'This is a Sample Selection box. The item you select will show or hide the next field.', 'jpry' ), | |
'type' => 'select', | |
'options' => array( | |
'option-1' => __( 'Option One', 'jpry' ), | |
'option-2' => __( 'Option Two', 'jpry' ), | |
'show-field' => __( 'Show Extra Field', 'jpry' ), | |
), | |
) ); | |
$cmb->add_field( array( | |
'name' => __( 'Extra Field', 'jpry' ), | |
'id' => 'jpry_extra_field', | |
'desc' => __( 'This extra field will only be shown when the "Show Extra Field" option is selected above.', 'jpry' ), | |
'type' => 'textarea', | |
) ); | |
} | |
add_action( 'admin_enqueue_scripts', 'jpry_enqueue_scripts' ); | |
/** | |
* Enqueue our script when needed. | |
*/ | |
function jpry_enqueue_scripts() { | |
$screen = get_current_screen(); | |
if ( ! isset( $screen->post_type ) || 'post' !== $screen->post_type ) { | |
return; | |
} | |
$script_name = 'cmb2_sample.js'; | |
$url = trailingslashit( plugin_dir_url( __FILE__ ) ); | |
wp_enqueue_script( 'jpry_cmb2_show_hide_example', $url . $script_name, array( 'jquery' ), '1.0.0' ); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello JPry - well done, it works just fine!
...now I'm trying to apply this show/hide feature to a group rather than a single input element; I thought that this should work anyway since the js address to the trigger's nearest cmb-row, but don't - but I'm not a js ninja so surely I'm missing something...
Any help is more than welcome
Cheers
Paolo