Support

Account

Register Login

Home › Forums › ACF PRO › Initialise WYSIWYG fields on change of radio

Solved

Initialise WYSIWYG fields on change of radio

  • Hi

    Hope I’m post this in the correct place?
    Apologies if this is considered a support issue.

    I have setup a number of different ACF field groups in PHP that are shown/hidden when a radio field is changed. I’ve not used any conditional logic in the sense of ACF field logic – I’ve added an event listener to the radio being changed and I show/hide the relevant field groups like so:

    
function updateLayout( $value ) {

  if ( typeof $value === 'undefined' ) { return; }

  // Hide all groups initially
  $( '[id*="acf-group_acf"]' ).hide();

  switch ( $value ) {

    // --------------------------------------------------------------------
    // Cascade
    // --------------------------------------------------------------------
    case 'cascade':

      $( '#acf-group_acf-hero-product' ).show();
      $( '#acf-group_acf-e-1' ).show();
      $( '#acf-group_acf-f-1' ).show();
      $( '#acf-group_acf-d-1' ).show();
      $( '#acf-group_acf-c-1' ).show();
      $( '#acf-group_acf-e-2' ).show();
      break;

    // --------------------------------------------------------------------
    // Full
    // --------------------------------------------------------------------
    case 'full':

      $( '#acf-group_acf-hero-product' ).show();
      $( '#acf-group_acf-j-1' ).show();
      $( '#acf-group_acf-c-1' ).show();
      $( '#acf-group_acf-d-1' ).show();
      $( '#acf-group_acf-g-1' ).show();
      $( '#acf-group_acf-e-1' ).show();
      break;

    // --------------------------------------------------------------------
    // Grid
    // --------------------------------------------------------------------
    case 'grid':

      // etc..

      break;

    default:

  } // switch

}

// --------------------------------------------------------------------
// Initial view setup
// --------------------------------------------------------------------
$(document).ready(function() {

  // --------------------------------------------------------------------
  // Watch for changes to radio input
  // --------------------------------------------------------------------
  $( 'input[name="acf[field_product-layout]"]' ).on( 'change', function(){

    // Refresh view
    updateLayout( $(this).val() );

    jQuery( document ).trigger( 'acf/setup_fields', jQuery( '#post' ) );
    acf.do_action( 'ready', $( 'body' ) );
    acf.do_action( 'load', $( 'body' ) );
    acf.fields.wysiwyg.initialize();
  });

});

    Some of the ACF groups contain WYSIWYG fields which if on first page load are visible – then they are initialised and working correctly, but when I make a change to the radio field – the newly visible WYSIWYG fields don’t work until you save/refresh the post.

    What’s the JS needed to initialise WYSIWYG fields?

    In other forum posts I’ve found:

    
jQuery( document ).trigger( 'acf/setup_fields', jQuery( '#post' ) );
acf.do_action( 'ready', $( 'body' ) );
acf.do_action( 'load', $( 'body' ) );
acf.fields.wysiwyg.initialize();

    This does something odd and adds another WYSIWYG content area below the initial one when you switch between Visual/Text tabs.

    Help gratefully received!

  • Is there a particular reason that you’re not using the conditional logic built into ACF for doing this?

  • Yes. Because the built-in conditional logic doesn’t work across different field groups.

  • It is possible to add code to make the conditional logic work across field groups, it’s just not built into ACF. What version of ACF are you using?

  • Oh really? That’s good news!

    I’m using ACF Pro v5.3.9.2.

    Is it a plugin?

  • There is an old post by the developer that gives some basics on adding conditional logic here http://www.elliotcondon.com/conditional-logic-for-advanced-custom-fields/ and there is additional information posted by another user here https://support.advancedcustomfields.com/forums/topic/conditional-logic-across-field-groups/

    some other things to look out for. ACF5 uses field keys rather than field names so for example instead of using

    
$('#acf-hero_image, #acf-hero_video, #acf-hero_slider').hide();

    you’d use something like this

    
$('#acf-field_01234567890123, #field_01234567890123, #field_01234567890123').hide();

    Also, if you’re looking to show and hide entire field groups, which it appears that you are trying to do, I have built a plugin that creates location rules based on choice fields that can be found here https://github.com/Hube2/acf-custom-field-locations-rule. Even if you don’t use the plugin you can see how to make this work by looking at my code.

  • Thanks John I’ll read through those links a little later today.

    Thanks for the info/support.

  • To close this thread off.

    I tracked down my original issue with WYSIWYG fields not working. It was because I was using a function to re-order fields via prepend which was the culprit to ‘breaking’ the WYSIWYG fields.

    Thanks again @hube2 for your support. The links you sent helped with other areas of my code.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.