Reply To: Add row to repeater field with js?

• 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.