Populate repeater rows with JS API

• brnteka

• May 6, 2022 at 6:07 pm

Hi, i have a repeater field with a number of rows, and i want to populate another repeater on the same page with rows and all the values from the former repeater (clone it so to speak) using JS API, i’m able to get the repeater field with getField(), but its getValue() method returns only the number of rows it has (length). How can i iterate over the repeater collect all the subfields and then add them to another repeater? Any help would be much appreciated

• brnteka

• May 7, 2022 at 3:06 pm

so after some time digging into the source code i ended up with this code, maybe it would be helpful for somebody who stumbles upon similar functionality

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

    var scheduleTemplate = acf.getField('schedule_template_weeks');

    acf.addAction("new_field/key=field_617d3317cd216", function ($field) {
        scheduleTemplate.$rows().each(function (index, element) {

            var dayOfWeekNewField = $field.add()
            var days = acf.getField(dayOfWeekNewField.find('[data-key="field_617d2f19b30e3"]'));
            var timeslots = acf.getField(dayOfWeekNewField.find('[data-key="field_617d33d4d109c"]'));
            var daysTemplate = acf.getField($(element).find('[data-key="schedule_template_weeks_days"]'));
            var timeslotsTemplate = acf.getField($(element).find('[data-key="schedule_template_weeks_timeslots"]'));

            //days

            days.$inputs().each(function (index, element) {
                if (daysTemplate.getValue().includes('on')) {
                    days.$toggle().click()
                } else if (daysTemplate.getValue().includes($(element).val())) {
                    element.checked = true;
                }
            })

            timeslotsTemplate.$rows().each(function (index, element) {

                var timeSlotNewField = timeslots.add()

                var from = acf.getField(timeSlotNewField.find('[data-key="field_617d3195ab484"]'));
                var to = acf.getField(timeSlotNewField.find('[data-key="field_617d3201e9780"]'));
                var price = acf.getField(timeSlotNewField.find('[data-key="field_617d3207e9781"]'));
                var type = acf.getField(timeSlotNewField.find('[data-key="field_617d3226e9782"]'));

                var fromTemplate = acf.getField($(element).find('[data-key="schedule_template_weeks_timeslot_time_from"]'));
                var toTemplate = acf.getField($(element).find('[data-key="schedule_template_weeks_timeslot_time_to"]'));
                var priceTemplate = acf.getField($(element).find('[data-key="schedule_template_weeks_timeslot_price"]'));
                var typeTemplate = acf.getField($(element).find('[data-key="schedule_template_weeks_timeslot_type"]'));

                //from

                from.$input().val(fromTemplate.getValue())

                var parsedFromTime = $.datepicker.parseTime('HH:mm:ss', fromTemplate.getValue(), {})

                var formattedFromTime = $.datepicker.formatTime('h:mm tt', {
                    hour: parsedFromTime.hour,
                    minute: parsedFromTime.minute
                }, {})

                from.$inputText().val(formattedFromTime)

                //to

                to.$input().val(fromTemplate.getValue())

                var parsedToTime = $.datepicker.parseTime('HH:mm:ss', toTemplate.getValue(), {})

                var formattedToTime = $.datepicker.formatTime('h:mm tt', {
                    hour: parsedToTime.hour,
                    minute: parsedToTime.minute
                }, {})

                to.$inputText().val(formattedToTime)

                //price

                price.$input().val(priceTemplate.getValue())

                //type
                type.$el.find('[value=' + typeTemplate.$input().val() + ']').click();
            })
        })
    });
});