Support » Plugin: Advanced Custom Fields: Extended » Conditional logic for Select2 results

  • Resolved yourtrustedfreelancer

    (@yourtrustedfreelancer)


    Hi,
    As always, thank you for the great work.
    I have been searching and reading for a way to query post object fields based on a selection made by another post object field ( or select ) while in front-end form ( using ajax).
    In the page I linked, there are two post object fields called “home arena” and “current teams”.
    I want to query “current teams” results based on the selected “home area” value to show only the teams that are in the that arena.
    Do you think that is something that can be added to the plugin or is it too complicated, because I have found only few leads to help out.
    lead #1 ,
    lead #2 .
    Thanks again, I know you are probably busy so take your time.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Konrad Chmielewski

    (@hwk-fr)

    Hello,

    Thanks for the feedback. This feature request is tough to weigh, because it’s hard to find a solution that fits everyone needs with an UI in ACF Extended. Most scenarios like yours, implying dependant fields, are really specific to the project.

    Generally speaking when you’re working on a complex feature like that, I advise you to start by doing it in the backend, on a test post. Once it works as expected, you can migrate the code for the front-end form.

    Here is a code example that should work in your case. In this example, there are 2 Post Object fields: post_object_1 & post_object_2. I’ll directly write JS code in an admin hook instead of enqueuing a JS file, following this documentation: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/.

    This JS code only works in the back-end right now. If you want to enqueue proper JS files in front-end or back-end, please refer to the ACF documentation.

    Note: Please read carefully the comments in the code, as it took me some time to write it so you can understand what is going on.

    Video example: https://i.imgur.com/srKnxmg.mp4
    Post Object 1 data in the Post Object 2 Ajax Request: https://i.imgur.com/CQLwuQD.png

    
    /*
     * ACF Post Object JS
     */
    add_action('acf/input/admin_footer', 'my_acf_post_object_js');
    function my_acf_post_object_js(){
    ?>
    <script type="text/javascript">
    (function($){
        
        // Bail early if there is no 'acf'
        if(typeof acf === 'undefined')
            return;
        
        /*
         * Post Object 1: JS Loading Hook
         * Description: On load check for Post Object 2 and disable it if there is no value in Post Object 1
         */
        acf.addAction('new_field/name=post_object_1', function(post_object_1){
    
            // Search post_object_2 field
            var post_object_2 = acf.getFields({
                name: 'post_object_2',
                limit: 1
            });
    
            // Bail early if post_object_2 field is not found
            if(!post_object_2.length)
                return;
    
            // Reset array
            post_object_2 = post_object_2.shift();
    
            // Get post_object_2 input
            var $post_object_2_input = post_object_2.$input();
    
            // If there is no value in post_object_1: Disable + Remove any value from post_object_2
            if(!post_object_1.val()){
    
                // Disable
                post_object_2.disable();
    
                // Remove any value
                $post_object_2_input.val(false);
                $post_object_2_input.change();
    
            }
    
            /*
             * Post Object 1: On Change
             */
            post_object_1.on('change', function(){
    
                // If there is no value in post_object_1 after a change: Disable + Remove any value from post_object_2
                if(!post_object_1.val()){
                    
                    // Disable
                    post_object_2.disable();
                    
                    // Remove any value
                    $post_object_2_input.val(false);
                    $post_object_2_input.change();
                    
                    // Stop
                    return;
    
                }
    
                post_object_2.enable();
    
            });
    
        });
    
        /*
         * Post Object 2: JS Ajax Data
         * Description: Add a Post Object 1 value to the Post Object 2 Ajax Data
         * Note: The hook 'select2_ajax_data/name=post_object_2' will only works with ACF Extended. Out of the box, ACF doesn't allow to target specific name on 'select2_ajax_data' JS hook
         */
        acf.add_filter('select2_ajax_data/name=post_object_2', function(data, args, $input, field, instance){
    
            // Search post_object_1 field
            var post_object_1 = acf.getFields({
                name: 'post_object_1',
                limit: 1
            });
    
            // Bail early if post_object_1 field is not found
            if(!post_object_1.length)
                return data;
    
            // Reset array
            post_object_1 = post_object_1.shift();
            
            // Set post_object_1 value in the ajax data
            data.post_object_1 = post_object_1.val();
            
            return data;
    
        });
    
    })(jQuery);
    </script>
    <?php
    }
    
    /*
     * Post Object 2: PHP Ajax Query
     * Description: Retrieve the Post Object 1 Value and do something with it
     * Documentation: https://www.advancedcustomfields.com/resources/acf-fields-post_object-query/
     */
    add_filter('acf/fields/post_object/query/name=post_object_2', 'my_acf_post_object_2_query', 10, 3);
    function my_acf_post_object_2_query($args, $field, $post_id){
        
        // Retrieve post_object_1 value
        $post_object_1 = acf_maybe_get_POST('post_object_1');
        
        if(!$post_object_1)
            return $args;
        
        // Do something with $args ...
        
        return $args;
        
    }
    

    Hope it helps!

    Regards.

    Thread Starter yourtrustedfreelancer

    (@yourtrustedfreelancer)

    Hello,
    Thank you so much much for this, you are a true hero.
    I thought I was close but this would have taken me months before I figured it out – I have read the comments 🙂 and added

    // Remove any value in post object 2 in case user changes the post object 1 selection.
                $post_object_2_input.val(false);
                $post_object_2_input.change();

    for post object 1 on change.
    The code works perfectly back-end and somehow front-end, the result

    Is it possible – using that code – to add it to the plugin? at least for the post object fields, maybe – just like the bidirectional or conditional logic – as options, let’s say you could add:

    $post_objct_1_field_name = get_field('post_object_1', options);
     $post_objct_2_field_name = get_field('post_object_2', options);
     $args 	                  = get_field('post_object_2_args', options);

    then a user can choose in post object 2 the related post object 1 and the args to query the post object 2, but I leave it to you , you are the expert :).

    Again, Many thanks, and I will always support this plugin and your work.

    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    Hello,

    As I said, it will be hard to provide a solution for everyone needs. The UI would be quite different than Bi-directional setting, as the value only goes one-way, and possible to multiple other Select fields. I’m glad to see it’s working tho.

    If you enjoy ACF Extended, feel free to submit a review. It always helps, and it’s much appreciated 🙂

    Have a nice day!

    Regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Conditional logic for Select2 results’ is closed to new replies.