Support

Account

Home Forums Backend Issues (wp-admin) Disabled JS input (Select, User, …) Save as empty

Solved

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

  • 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).

  • 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.

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

You must be logged in to reply to this topic.