Add row to repeater field with js?

• PineTreeThemes

• February 9, 2016 at 4:50 pm

Hello, is there a way to add a row to the repeater field with javascript? I want to add a new row when user fills an input and presses a button.

• John Huebner

• March 26, 2016 at 12:35 pm

Well, it’s been a month on this topic, but I have recently been working on a project where I wanted to do this so I thought I would share my solution.

Take a look at this file I uploaded to GitHub https://github.com/Hube2/blunt-parametric-search/blob/master/admin/js/admin.js

Look at the function _para_meta_key_change.

This function gets a meta_key value from one of two possible fields. Depending on other values it then removes the current rows from a repeater field, then it does an AJAX request and re-populates the repeater with the values that in the AJAX response.

I can’t really explain the whole thing, it took me several hours of poking and prodding to figure it out.

The important bits:
line 128: triggering the click action for the add row link
lines 130 to 135: getting the data-id, which is a unique ID for a cloned field that ACF adds, of each row that is added, and then setting the values of the fields in that row.

The setting of the values will be highly dependent on what type of field your setting, in my case these are simple text fields.

Also since your adding one field and then setting the values you won’t need a loop, you’ll just need to look at the last row, the one that was just added.

I don’t know if this information will help you or anyone, but there it is. I can try to answer questions, but anything involving JavaScript for ACF fields is going to take a bit of trial and error.

• city17

• September 9, 2019 at 7:41 pm

I know this is a bit of an old topic, but I’m having the same problem and your link no longer works @hube2 .

Did you eventually figure out how to (easily?) add a repeater row in Javascript?

• John Huebner

• September 11, 2019 at 11:42 pm

I still have that code, but none of it will work any more because of the new ACF JS API.

Basically you need to add an event to something, when that happens I just trigger the add row link for the repeater. In my case it’s something like

$('[data-key="field_56f3e299b6407"] ul.acf-actions a[data-event="add-row"]').trigger('click');

field_56f3e299b6407 is the repeater key.

You can trigger the removal of a row using

$('[data-key="field_56f3e299b6407"] tr a[data-event="remove-row"]').not('[data-key="field_56f3e299b6407"] tr.acf-clone a[data-event="remove-row"]').trigger('click');

The actual selectors may be different depending on your repeater layout.

If you’re going to remove and add multiple rows to the repeater you need to be careful of the order that you do things because the rows you want to remove may still be there when you start adding data. There is a delay in the removal

Steps:
1) Remove repeater rows
2) Add enough repeater rows to hold the data you want to add
3) Add the data to sub fields starting at the end and moving up/backwards. This is the important part because the fields you removed will still be there until your script ends and the DOM refreshes.

Sorry I can’t supply any code, but that project died and all of the code in it would need to be rewritten to use the new ACF JS API https://www.advancedcustomfields.com/resources/javascript-api/ for the getting and setting of values as well as having all the ajax requests rebuilt.

• city17

• September 12, 2019 at 12:36 am

Thanks very much, John. I already figured out how to add a repeater row, but I wasn’t sure how to deal with removing (because of the confirmation popup). Your code is very helpful.

I won’t be adding and removing at the same time, they’re separate actions. But it’s good to know there’s a workaround.

• pzh20

• March 2, 2021 at 10:10 pm

City17, did you manage to get anything working? I’m just starting out trying to develop a frontend hotspot generator and need some code to add repeater fields with the coordinates of the hotspot. Any chance you could share some example code for me?

Many thanks
Pete

• pzh20

• May 13, 2021 at 7:11 pm

City17, did you manage to get anything working? I’m just starting out trying to develop a frontend hotspot generator and need some code to add repeater fields with the coordinates of the hotspot. Any chance you could share some example code for me?

Many thanks
Pete

• city17

• May 13, 2021 at 7:40 pm

Hi Pete, it’s been a while and I never fully used this functionality. I think I only figured out how to add a repeater row with Jquery. The problem was that removing the row triggers a confirmation dialogue box, which you also would have to ‘click’ using JS.

    // Add data to ACF field with Jquery
    (function($){
        if (typeof(acf) == 'undefined') { return; }

        var repeatDiv = document.querySelector('.acf-field-asdfkey');
        var addRow = repeatDiv.querySelector('.acf-button');
        addRow.click();
        var field = acf.getFields({
            key: 'field_asdfkey'
        });
        field.slice(-1)[0].val(gridArea);
    })(jQuery); }

I don’t really know if this code still works, but it’s all I have. Hope it can be of help.