jcchavezs / cmb2-conditionals

Plugin to relate fields in a CMB2 metabox

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

doesn't hide wysiwyg types

pbearne opened this issue · comments

Hi

I have found that if I use a wysiwyg typeit dones hide it

It doesnt get added to the jQuery('[data-conditional-id]') array

this doesn't work

$cmb->add_field( array(
'name' => __( 'Slide content', Config::get_text_domain() ),
'desc' => __( 'field description (optional)', Config::get_text_domain() ),
'id' => self::$cmb_prefix . 'content',
'type' => 'wysiwyg',
'options' => array( 'textarea_rows' => 5 ),
'attributes' => array(
'data-conditional-id' => self::$cmb_prefix . 'slider_type',
'data-conditional-value' => 'image',
),
) );

this works

$cmb->add_field( array(
'name' => __( 'Slide content', Config::get_text_domain() ),
'desc' => __( 'field description (optional)', Config::get_text_domain() ),
'id' => self::$cmb_prefix . 'content',
'type' => 'textarea',
'options' => array( 'textarea_rows' => 5 ),
'attributes' => array(
'data-conditional-id' => self::$cmb_prefix . 'slider_type',
'data-conditional-value' => 'image',
),
) );

Hi @pbearne, I ran into the same issue and I found a fix by analyzing the JS file.

The JS parser is simply looking for any HTML tag with the data-conditional-id attribute.
Once it finds one, it checks for the other data attribute options (data-conditional-value and data-conditional-required) and then flags that row as needing to be hidden or displayed.

So, if you simply use one of the following CMB2 field settings (before, before_field, after_field, after) and put a dumb hidden input, the wysiwyg editor will be hidden as "expected". Here's what I did on my project:

'after_field' => '<input type="hidden" data-conditional-id="XXXXX" data-conditional-value="XXXXX">',

I hope this message helps someone in the future!

@jcchavezs: it could be interesting to simply filter the wysiwyg field generated by CMB2 to include this. As soon as I'm done with this client's project, I'll try to make a pull request.

@EricTousignant

I hope this message helps someone in the future!

Thanks a lot. It has helped!

To add a note, I had to use json in the data value for multiple conditions. In that case the after_field value needed to be bracketed with double quotes otherwise it did not work.

'after_field' => "<input type='hidden' data-conditional-id='tm_grid_box_type' data-conditional-value='".wp_json_encode( array( 'text', 'text_with_thumbnail' ) )."'>",

Output :
<input type='hidden' data-conditional-id='tm_grid_box_type' data-conditional-value='["text","text_with_thumbnail"]'>

I just found out that the workaround does not work with the current version ( https://github.com/jcchavezs/cmb2-conditionals/blob/9da413d34dbbb4267ee8fa43cfe946bafc28ee91/cmb2-conditionals.js as of writing). I had to add id attribute to the input element (given only as an example):

'after_field' => "<input type='hidden' id='the_example_settings_field_id' data-conditional-id='tm_grid_box_type' data-conditional-value='".wp_json_encode( array( 'text', 'text_with_thumbnail' ) )."'>",

And then I added the following to the line #70 of the javascript code.

if( 'undefined' == typeof currentFieldName ) currentFieldName = current.attr( 'id' );

Note: it is not possible to use the name attribute because the value of hidden input will override with the content of wysiwyg text area.

@EricTousignant Your method works great, with one catch. The name attribute must be defined and have a value on the hidden input. I just used name=asdf which seemed to work fine.

Another note is that the above code is getting the data-conditional-id attr in the data-conditional-value spot mixed up you need to switch those around. I think that is why you had to add the js code. I got rid of the js code and the id in the input you added and it still works.
So basically I did my 'after_field' code like this

'after_field' => "<input name="sample_name type='hidden' data-conditional-id='".wp_json_encode( array( 'field_type', 'field_id' ) )."' data-conditional-value='field_value'>",

where 'field_type', 'field_id', 'field_value' is what is setup for your 'data-conditional-id' and your 'data-conditional-value' in your attributes array for you add_field_group or add_field array
for me i was using this in a group field so mine is
'attributes' => array( 'required' => false, // Will be required only if visible. 'data-conditional-id' => wp_json_encode( array( $group_field_id, '_width' ) ), 'data-conditional-value' => 'col-xs-6', ),
'after_field' => "<input name="second_column" type='hidden' data-conditional-id='".wp_json_encode( array( $group_field_id, '_width' ) )."' data-conditional-value='col-xs-6'>",

still have to get it to the front end will update this if anything changes

@EricTousignant Hi! I added the after_field arg you mention in the wysiwyg field I want to hide, but it does not work. I'm using version 1.0.4. Any idea why?

I would have to see your code to decide what you are doing wrong. DO you have all your conditional values set up correctly for the wysiwyg field and for the radio or check box or select field the is suppose to show it?

@EricTousignant Just saw the comment of @ @galengidman and his suggestion works great!

@galengidman ditto Name attribute did the trick combined with @EricTousignant original recommendation