Update select field in repeater based upon the cho

Question

I've been looking for this a while and I can't really find a solution. I've read plenty of articles and all about dynamically populating select fields, but the way they're implemented isn't really what I'm looking for.

I have a repeater field on a page where the user can select multiple acts (from the Act CPT).

In these acts there is a repeater field in which they can add the different times the act is going to perform.

My 'choose acts' repeater is something like this.

• Choose Act (select field, shows all the posts from the act cpt)
• Choose time (select field, needs to load custom meta data from the chosen act post on the 'choose act' change).

What I'm looking for is, when the user chooses an act I want the 'Choose Time' select field to load the times the user added in the Act post.

So let's say I have Act A. Children of Bodom. I added four times to the post. 21.00, 22.00, 23.00 and 24.00.

I also have Act B. Social Distortion. I added three times to the post. 15.00, 16.00 and 17.00.

What I want is in my repeater when I select the act Children of Bodom, I want the time select for that repeater part to be updated with the times I've added to the Children of Bodom act.

Then I add another act in the acts repeater, where I select Social Distortion. I then want the respective time select to be updated with the times I've added to the Social Distortion act.

What I've tried so far is to add some JS to execute on a select change, I don't know to specifically trigger his respective time select to get updated with the fields, as the repeater is dynamically set up and I've not choosen an ID or key for that field.

What would be cool, but I don't know how to implement this, is to trigger the acf/load_field/key=blabla function from my JS file, where I can look up the right key by finding the first select after the one that triggered the change event. Then execute a function when that load field action gets triggered and load up the correct times in my time select for that respective act.

Sorry if this is a bit confusing, I don't really know how to describe this differently, but if you want more info, please ask!

Thanks.

Answer 1

I feel that in this case, because what you need is dynamic, you could look into using Wordpress's built in Ajax to handle this one. So, what you could do is to trigger an ajax call on change for that select field to do something like this

jQuery('act_select_field').change(function(){
    jQuery.ajax({
        url: "/wp-admin/admin-ajax.php",
        type: 'POST',
        data: {
            action: 'get_related_act_times',
            act_id: //send through the act ID value,            
        },
        dataType: 'html',
        success: function (result) {
            //Use the html to populate your time select field
        },
        error: function (errorThrown) {
            console.log(errorThrown);
        }
    });
})

Then, in your functions.php, register a function to handle this call, like this:

add_action('wp_ajax_get_related_act_times', 'get_act_times');
add_action('wp_ajax_nopriv_get_related_act_times', 'get_act_times');
/**
 * Get a list of events from Clear Bookings
 */
function get_act_times(){
    $act_id = $_POST['act_id'];
    $related_times = get_field('times_repeater_field',$act_id);
    foreach($realted_times as $time){
        //Build up your select html here
    }
    echo select_html
    die();
}

If you want to read a bit more about the Admin Ajax side of things, the Codex has a lot of information: https://codex.wordpress.org/AJAX_in_Plugins. This should hopefully get you started on dynamically populating your second dropdown - although you'll need to tweak the code to work on your own system