Target repeater sub-field with Javascript

• gabyferman

• May 22, 2021 at 5:07 am

How do you target the sub-fields inside a repeater field, so the JS applies to the sub-field when appending new groups???

Been looking, but I got really lost as to where even to start. And the JavaScript API is falling a little short on explaining how to work with repeaters.

I’m working on a form to add orders for a bakery. The form has a repeater which holds the options for each different bread order. In here the select field for TYPE OF DOUGH does much of the pre-selection for the other fields (size, shape, extras).

I’ve managed to target the select field of TYPE OF DOUGH to send and modify data through AJAX, but when adding another repeater row the code doesn’t work.

Here’s my code for php and js:

JS

jQuery(document).ready(function ($) {

    // field key for TYPE OF DOUGH select field inside repeater field
    var field = acf.getField("field_609b103fcd576");

    field.on("change", function (e) {
        var value = field.val();

        console.log(value);

        var data = {
            "action": "get_size_options",
            "type_of_dough": value,
        };

        $.ajax({
            url: ajax_object.ajax_url,
            type: "post",
            data: data,
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
        });
    });
});

PHP

// enqueue the scripts
function fw_acf_register_scripts() {

    // enqueue js file with ajax functions
    wp_enqueue_script(
        'acf-ajax-script',
        get_template_directory_uri() . '/assets/js/autopopulate.js',
        ['jquery']
    );

    wp_localize_script(
        'acf-ajax-script',
        'ajax_object',
        ['ajax_url' => admin_url('admin-ajax.php')]
    );
}
add_action('acf/input/admin_enqueue_scripts', 'fw_acf_register_scripts');

// ex. function to get options for the other fields
function get_size_options() {

    $meta_value = fw_get_term_id($_POST['type_of_dough'], 'dough'); 
    // just a function to get the ID for the taxonomy from the slug, 
    // so it just returns a number, say 501 which is then used for the term query

    $size_options = array();

    $terms_args = array(
        'taxonomy'   => 'size',
        'hide_empty' => false,
        'meta_key'   => 'tax_position',
        'orderby'    => 'tax_position',
        'order'      => 'ASC',
    );

    if ($meta_value_masa) {
        $terms_args['meta_query'] = array(
            array(
                'key'     => 'dough',
                'value'   => $meta_value,
                'compare' => 'LIKE',
            ),
        );
    }

    $terms = get_terms($terms_args);

    foreach ($terms as $term) {
        $size_options[$term->term_id] = $term->name;
    }

    wp_send_json($size_options);
    die();
}
add_action('wp_ajax_get_size_options', 'get_size_options');

• John Huebner

• May 28, 2021 at 11:55 pm

The best lead I can give you is this topic https://support.advancedcustomfields.com/forums/topic/adding-a-sub-field-to-a-repeater-with-javascript/

• gabyferman

• June 5, 2021 at 4:41 am

Ah thanks 🙂

I ended up doing trial and error, and found this as a solution:

// where field_609b103fcd576 is a sub-field in my repeater
acf.addAction("new_field/key=field_609b103fcd576", function ($field) {

    $field.on("change", function (e) {
        var value = $field.val();
        console.log(value);
    });
});

Not sure if it’s the optimal one, but it worked 🤷‍♀️