Logic between number and relationship fields

• balessan

• July 28, 2016 at 2:53 am

Hello All,

I did some googling and I did not find any hands-on solution and I am quite new to ACF (even though the product seems awesome for now) so I’d like to submit you a question.

In one of my custom post types, I do have an ACF number field and an ACF Relationship Field. I would like the number selected in the number field to be the max number of posts selected into the relationships fields.

The thing is, I do not really know if that’s possible (not possible using the built-in conditional logic). I do think I should be able to dynamically change the data-max number on the relationship fields whenever the number field is updated using javascript ?

Any thoughts on how to achieve that ?

Thanks in advance,

• balessan

• July 28, 2016 at 3:44 am

I was able to do it in a static way using some code from another thread here

My current code looks like this

  function load_proper_choices_number ( $field ) {
    global $post;
    if (!$post ||
    		!isset($post->ID) ||
    		( get_post_type($post->ID) != 'featured-content' ) ) {
    				return $field;
    }

    $number_value = get_post_meta($post->ID, 'featured_posts_number');
    $field['max'] = $number_value;

    return $field;
  }
  add_action( 'acf/load_field/name=featured_posts', 'load_proper_choices_number');

Works properly with a refresh every time I change the number of posts using the Number field, and now I will try to achieve it using some javascript. I do assume updating the data-max attributes of the relationship field should do the job.

Will let you know.

• balessan

• July 29, 2016 at 1:24 am

Hum, I did try to change the value of the data-max attribute of the field on the fly, but it does not modify the max property in the instance of the ACF field itself. My javascript code looks as follows:

 
jQuery(document).ready(function($) {
  if (typeof acf === 'undefined') { return; }

  var featuredContentExtension = acf.ajax.extend({
    events: {
      'change [data-key="field_5798cf2592b92"]': '_state_change'
    },

    _state_change: function(e) {
      var select_field = $('#acf-field_5798ced492b91');
      var number_field = $('#acf-field_5798cf2592b92');

      var current_post_number = select_field.attr('data-max');
      var selected_post_number = number_field.val();

      select_field.attr('data-max', "[\"" + selected_post_number + "\"]");
    }
  });
});

I can see that the data-max attribute is properly updated, but the validation is still triggered based on the previous number selected when trying to select additional posts.

While looking at the implementation in assets/js/acf-input.js, I noticed the following code:

add_item: function( e ){
  // max posts
  if( this.o.max > 0 ) {
    if( this.$values.find('.acf-rel-item').length >= this.o.max ) {
       alert( acf._e('relationship', 'max').replace('{max}', this.o.max) );
	return;
    }
  }
  // rest of the method...

So, is there an easy way either to override or to hook into the add_item method, or to modify the value of this.o.max ?

Thanks in advance,

• balessan

• July 29, 2016 at 2:11 am

Found a solution, reworked my code as the following:

jQuery(document).ready(function($) {
  if (typeof acf === 'undefined') { return; }

  var featuredContentExtension = acf.ajax.extend({
    events: {
      'change [data-key="field_5798cf2592b92"]': '_state_change'
    },

    _state_change: function(e) {
      var select_field = $('#acf-field_5798ced492b91');
      var number_field = $('#acf-field_5798cf2592b92');
      var element = $('.acf-relationship');
      var field_acf_data = acf.get_data( element );

      var new_post_number = number_field.val();
      select_field.attr('data-max', "[\"" + new_post_number + "\"]");
      field_acf_data.max = new_post_number;
    }
  });
});

The key here was to retrieve the ACF data from the element using the acf.get_data method, passing the relationship element as parameter 😉

Thanks for your attention !