Disabled JS input (Select, User, …) Save as empty

• 

  

  • feyfey

  • May 1, 2018 at 2:55 am

  Hi all,

  I have several user roles on my website and depending on which role their have user can only see/edit a portion of form field (option page or custom post type). In order to easily change the edit rules, I add two settings for each field type “user_roles_can_see” and “user_roles_can_edit” with the “acf/render_field_settings” function.

  Exemple for the edit setting :

  add_action('acf/render_field_settings', 'edit_render_field_settings');
  
  function edit_render_field_settings( $field ) {
  	// Get all existing user role - managed in an option page
  	if (have_rows('roles', 'option')) {
  		while( have_rows('roles', 'option') ){
  			the_row();
  			$id_role = get_sub_field('id_role', 'option');
  			$choices[$id_role] = get_sub_field('nom_role', 'option');
  		}
  	}
  	// Add general choices
  	$choices['administrator'] = 'Administrateur';
  	$choices['all'] = 'Tous';
  	// Add the settings with dynamical choices
  	acf_render_field_setting( $field, array(
  			'type' => 'select',
  			'label' => 'Editable par',
  			'name' => 'user_roles_can_edit',
  			'instructions'	=> 'Select user role - Can edit the field.',
  			'required' => 0,
  			'default_value' => array('all'),
  			'choices' => $choices,
  			'multiple' => true,
  			'ui'			=> 1,
  	), true);
  }

  To disabled the field when user can’t edit it, I used the “acf/prepare_field” function (also used to return FALSE if user can’t see the field). I used the readonly setting and if needed ( JS field) I add a new wrapper class (to create a JS selector) and some JS to disabled the input.

  In exemple I turn all field type to text type and change the readonly setting. If the user can edit a repeater field I remove with JS the actions button :

  add_filter('acf/prepare_field', 'edit_prepare_field');
  
  function edit_prepare_field( $field ) {
  	global $current_user;
  	$current_role = $current_user->roles;
  	$type = $field['type'];
  	$wrapper = $field['wrapper'];
  	$width = $wrapper['width'];
  	$class = $wrapper['class'];
  	$name = $field['key'];
  	$value = $field['value'];
  	$choice = $field['choices'];
  	if (isset($field['user_roles_can_edit']) && !empty($field['user_roles_can_edit']) && is_array($field['user_roles_can_edit'])) {
  			foreach ($field['user_roles_can_edit'] as $role) {
  				if ($role != 'all' && !in_array($role, $current_role)) {
  					switch ($type) {
  						case 'repeater':
  							$class='disabled_repeater';
  							$field['readonly'] = 1;
  							$field['wrapper'] = array('width'=> $width,'class'=>  $class);
  							break;
  						default:
  							$field['type'] = 'text';
  							$field['readonly'] = 1;
  							break;
  					}
  				} elseif ($role = 'all' || in_array($role, $current_role)) {
  					$field['type'] = $type;
  					$field['wrapper'] = array('width'=> $width,'class'=>'');
  					$field['readonly'] = 0;
  					break;
  				}
  			}
  	}
  	return $field;
  }
  
  function read_only_field_javascript() {
  	if ( !is_admin() ) { return; } // applicable uniquement sur le wp-admin
  	?>
  	<script type='text/javascript'>
  		( function ( $ ) {
  		$( document ).ready( function () {
  			$('.disabled_repeater .acf-actions a[data-event="add-row"]').remove();
  			$('.disabled_repeater .remove a[data-event="add-row"]').remove();
  			$('.disabled_repeater .remove a[data-event="remove-row"]').remove();
  		});
  	  }( jQuery ) );
  	</script>
  	<?php
  }
  add_action( 'admin_footer', 'read_only_field_javascript' );

  This “tricks” works fine but I have a big issue with field type like : Select field type with advenced interface. If I disabled the select input :

  add_filter('acf/prepare_field', 'edit_prepare_field');
  function edit_prepare_field( $field ) {
  	...
  	case 'user':
  		$field['wrapper'] = array('width'=> $width,'class'=> 'disabled_user');
  		$field['readonly'] = 1;
  		break;
  	...
  	return $field;
  }
  
  function read_only_field_javascript() {
  	...
  	$('.disabled_user select').prop('disabled','disabled');
  	...
  }

  And save update when this field is disabled : I’ll have a empty value on the refresh page. (unlike for a date picker which works fine) I saw, Select field type with advanced interface is strangely coded (it’s not just a select input). So my question : How can I correctly disabled a JS advenced interface select field type (User, Select, Post object, etc.) in order to not change the database value when page is saved

  Thanks a lot to who may help (or juste took time to read).
• 

  

  • feyfey

  • May 3, 2018 at 3:10 am

  I found a solution by myself. Some input type as Chekbox type have an additional hidden input so I need to disabled all the input used by ACF.

  Exemple for Chekbox :

  add_filter('acf/prepare_field', 'edit_prepare_field');
  function edit_prepare_field( $field ) {
  	...
  	case 'checkbox':
  		$field['wrapper'] = array('width'=> $width,'class'=> 'disabled_checkbox');
  		$field['readonly'] = 1;
  		break;
  	...
  	return $field;
  }
  
  function read_only_field_javascript() {
  	...
  	$('.disabled_checkbox select').prop('disabled','disabled');
          $('.disabled_checkbox input').prop('disabled','disabled');
  	...
  }

  User field is more complex (use <span> for exemple) and can’t be disabled by the previous methode, some other like gallery can really be disabled so I change the field type to “enhanced_message” and display the value with some PhP.