Support

Account

Home Forums Backend Issues (wp-admin) Load dynamically fields on select change

Solving

Load dynamically fields on select change

  • Hi Elliot,
    I’m developing a plugin for Custom Post Templates (CPT) and ACF, creating the respective conditional.

    The problem is getting the fields dynamically when the select from CPT changes to another value. I would like to add the same functionality as it is changing the “Page template” in pages, or a category in Posts.

    I tried “acf/update_field_groups” but I have no idea how to achieve it.

    Something like:

    jQuery(function($){
    	$('#custom_post_template').on('change', function(){
    		var val = $(this).val();
    		$(document).trigger("acf/update_field_groups");
    		console.log(val);
    	});
    });
  • Hi @jepser

    You are very close, but looking at the /js/input/ajax.js file, you can see that the acf.screen objecrt needs to be updated with the new value!

    Here is an example of the page template

    
    $(document).on('change', '#page_template', function(){
    		
    		acf.screen.page_template = $(this).val();
    		
    		$(document).trigger('acf/update_field_groups');
    	    
    	});
    

    You should be able to see how to change page_template to post_template!

    Thanks
    E

  • Well I tried what you told me but nothing happens:

    jQuery(function($){
    	$(document).on('change','#custom_post_template', function(){
    		console.log(acf.screen);
    		acf.screen.cpt_template = $(this).val();
    		$(document).trigger("acf/update_field_groups");
    		console.log(acf.screen);
    	});
    });

    As I think acf.screen are the options, in the plugin I have the cpt_template as the “slug”

    function acf_location_rules_types( $choices ){
    		$choices['Post']['cpt_template'] = __('Post Type Template','acf-cpt');
    	 
    		return $choices;
    	}

    Also, I don’t know if I have to include the javascript (above) like you have here:

    http://www.advancedcustomfields.com/resources/tutorials/adding-custom-javascript-jquery-for-fields/

    Or in my own script (as I’m doing it now).

    Thanks for your help.

  • Hi @jepser

    You can view the console log to see if your cpt_template data is being sent in the AJAX request.

    There are 3 parts to the PHP code. You have shown the first; adding the rule choice, but have you added the code to select a rule value? And have you written the logic to do the comparing and return true / false?

    All is explained in this tutorial:
    http://www.advancedcustomfields.com/resources/tutorials/custom-location-rules/

    Thanks
    E

  • Hi!
    Yes I had, here is my file if you can check it would be awesome.

    And this is what I have in my acf_ctp.js

    jQuery(function($){
    	$(document).on('change','#custom_post_template', function(){
    		console.log(acf.screen);
    		acf.screen.cpt_template = $(this).val();
    		$(document).trigger("acf/update_field_groups");
    		console.log(acf.screen);
    	});
    });

    I don’t know what I’m missing. Thanks,

    (I tried to attach a php file)

  • Hi @jepser

    Can you try to re-upload the file? Perhaps it is too large?

    Maybe you could post the code online and link to it?

    Thanks
    E

  • Hi @jepser

    Can you please check your console log in combination with debugging your code to check the value of each line of code.

    i think the issue may be this:

    
    global $post;
     $current_template = get_post_meta($post->ID, 'custom_post_template',true);
    

    In an AJAX call, there is no global $post

    Take a look at ACF’s core location code to see where it gets’ it’s $post_id from

    Thanks
    E

  • The other issue is that your match rule always loads the postmeta.

    After you change the sleect box and fire off the AJAX call, WP has not yet updated this value into the DB, so your get_post_meta will not work.

    Again, take a look at the source code for ACF’s location controller to see how it gets the JS dynamic value! Best example is the page template match rule

    Thanks
    E

  • Thanks for your response I will let you knwo if I solve it.

  • Has this been solved? I am very close to getting this working, but I cannot get the AJAX aspect to work.I see that you said the post_meta needs to be updated, but I am unsure how to do that. Here is the code that I have. Everything works great except for the AJAX updating. Can you please help me.

    
    add_filter('acf/location/rule_types', 'acf_location_rules_types');
    function acf_location_rules_types( $choices )
    {
        $choices['Page']['customtemplate'] = 'Custom Template';
     
        return $choices;
    }
    
    add_filter('acf/location/rule_values/customtemplate', 'acf_location_rules_values_user');
    function acf_location_rules_values_user( $choices ){	
    	
    	$uploads = get_template_directory();
    
    	if ($dir = opendir($uploads.'/productstype')) {
    		$images = array();
    		while (false !== ($file = readdir($dir))) {
    			if ($file != "." && $file != "..") {
    				$images[] = $file;
    			}
    		}
    		closedir($dir);
    	}
    	
    	foreach($images as $image) {
    		$image  = str_replace(".php", "", $image);
    		$choices[ $image ] = $image;
    	}
        
        return $choices;
    }
    
    add_filter('acf/location/rule_match/customtemplate', 'acf_location_rules_match_user', 10, 3);
    function acf_location_rules_match_user( $match, $rule, $options ){	
    	global $post;
    	
        $current_user = get_post_meta( $post->ID, 'page_template_productstype_select', true );
        //$selected_user = (int) $rule['value'];
    	
        if($rule['operator'] == "=="){
        	if($current_user == $rule['value'] ){
    	    	$match = true;
        	}else{
    	    	$match = false;
        	}
        }elseif($rule['operator'] == "!="){
        	if($current_user == $rule['value'] ){
    	    	$match = false;
        	}else{
    	    	$match = true;
        	}
        }
        return $match;
    }
  • When I attempt this code, acf.screen is undefined when I change the Parent Page dropdown. Is there something I’m missing as well?

    jQuery(function ($) {
      $(document).on('change', '#parent_id', function () {
    
        acf.screen.parent_page = $(this).val();
    
        $(document).trigger('acf/update_field_groups');
    
      });
    });
  • Quite same issue here,
    I’ve expained here better: support.advancedcustomfields.com/forums/topic/assign-acf-to-a-post-template/#post-34918

    I’m using ACF PRO

    Maybe the object acf.screen does not more exist or has changed name, or it’s different in PRO version?

    Would really like to have an answer on this.

    PS: Is there any documentation about acf.screen stuff?

  • problem Solved here

    acf.screen is an old method, now we must use: acf.ajax.update

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

The topic ‘Load dynamically fields on select change’ is closed to new replies.