Support

Account

Register Login

Home › Forums › Front-end Issues › Adding a sub field to a repeater with JavaScript

Solved

Adding a sub field to a repeater with JavaScript

  • I’m working on a project where I’m fetching data from an API and populate ACF-fields with that data, then the user have the option to edit the fields before saving.

    The problem I have is that I’m also receiving image urls that I want to add to a repeater field. I get it to work in PHP, but I would need to do that in JS so that the changes are seen in the front-end as the are added.

    The PHP-code that works but requires refresh to show the new rows looks like this. 

    foreach ($_POST['images'] as $imageUrl) {
    $row = array(
        'img_or_vid' => 'url',
        'image_url' => $imageUrl
    );
  add_row('field_56728ffb6a733', $row, $_POST['postId']);
}

    So, I have an array of image urls in $_POST[‘images’]. For each image url I need to add a row where img_or_vid is ‘url’ and the image_url field is the url inside $_POST[‘images’].

    Is there some way of doing this with JS in the frontend? Maybe I’m missing something obvious since I’m so new to ACF.

  • I have generally done this in the past by targeting the link that adds a row and triggering its click action.

    
$('[data-key="your repeater key here"] .acf-actions a.add-row').trigger('click');

    Then adding an append action https://www.advancedcustomfields.com/resources/javascript-api/#actions-append to populate the sub field using the fields set method https://www.advancedcustomfields.com/resources/javascript-api/#functions-set

  • Thanks! Got it to work!

  • Micke, do you have an example I can see as I’m struggling trying to do the same thing.

    Many thanks
    Pete

  • I added
    jQuery('[data-key="field_609af70f9fdac"] a[data-event="add-row"]').trigger('click');
    to my javascript, and instead of adding one row, it added 4 although in the chrome developer, it was only called once

    Any ideas?

  • You need to make sure you’re targeting only one link. Every row of a repeater has an element that will match your selector. You code will trigger a click on every matching element. You’ll notice that the selector I posted above includes .acf-actions to target only the add element inside of that element.

  • Thanks John, I didn’t realise the tooltip also had Add-row. Forgive my lack of experience with this, but you suggested using the append function, I assume to trigger your script to run, then the set method to update the fields created by the click. How did you get the update to run, another click?

    Many thanks

  • Actually, when working with repeaters and populating fields, I have not used the ACF api. I have not had to do work like this in some time and I have not figured out how to use it with with looping through or finding repeaters that have just been added.

    The last time I did this what I needed to do what to delete all of the repeater fields, then I would add as many as I needed and then I would populate them all at one time.

    This is only a guess, but I would say, create a loop that inserts on new row at a time. This insertion should trigger your append action and then the loop would add another field. I don’t know if that will work in practice.

  • Hello

    Using the JS API , this is really simple

    
my_repeater = acf.getField('<my key>');
my_repeater.add();

  • Thanks Christian,

    Is the <my key> the repeater field key? This looks like it is trying to add another repeater field, not a row in the repeater, but what do I know.

  • @pzh20, yes it is the repeater field key then you can use the add method to create a new row.

  • @pzh20 , @hube2 I’ve just played around repeaters in JS.

    Here the basic code used to add a row and to retrieve all the sub fields.

    // Get repeater field (replace my-repeater-field-key' with a field key)
repeater = acf.getField('my-repeater-field-key');

// Add a new row
$row = repeater.add();

// Get subfields
let sub_fields=[];
$row.children('td.acf-field').each((i,$el)=>{
     sub_fields[i] = acf.getField($el);
})
// show sub fields                    
console.log(sub_fields);

// loop around sub fields and populate them.

    Not so tricky with ACF JS API…

  • Thanks again Christian, if I give you my problem, maybe you can finish it all! Lol

    People like you make people like me very happy and you’ve helped me a lot.

    Regards
    Pete

  • Oups last solution failed in some cases…

    But I think that this one is better and simpler (but not fully tested) ..

    `// Get repeater field (replace my-repeater-field-key’ with a field key)
    repeater = acf.getField(‘my-repeater-field-key’);

    // Add a new row
    $row = repeater.add();

    // Get subfields
    let sub_fields=acf.getFields({ parent: $row});

    // show sub fields
    console.log(sub_fields);

    // loop around sub fields and populate them.

  • @christian-denatorange-fr Your code should work when the repeater field is used as a flexible content?

    In my case, I have a layout with a selector and a repeater:

    acf.addAction('new_field/name=preset', foo);

function foo(field) {
  field.on('change', function() {
    const repeater = acf.getField('field_page-builder_sections_row-module_row_columns');
    let $row = '';
    $row = repeater.add();
  });
}

    But nothing happens.

  • This works great for my use, however is there a way to set the value of this additional repeater row dynamically rather than just adding a blank row?

    $row = repeater.add(); doesn’t seem to have any options? $row = repeater.add(‘value’); would be great, otherwise is there any other way with the JS API to do it or does it need to be done with basic jquery targeting the new element?

  • I think you can trap JS hooks to add dynamic content to row fields once a new row has been added.

  • I’ve done this by clicking the new row and adding the fields, but this is doing it as if the user was inputing the values not by programmatically adding a row

  • After a long search here in support articles and in the web including github i have already some open questions about this solution:

    In my project i have one repeater field which i had to dynamically adjust based on another value. While using “load_field” it works perfect by setting [min] and [max] to the value i need (the value from another field).

    But i want to set this value on the edit page too – that means i change one field – i have a new value and now: change the rows…..

    I cant get it work! the add() function only works when the repeater field has NO settings for min and max. I tried a lot but with no result.

    It would be great to get help.

Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘Adding a sub field to a repeater with JavaScript’ is closed to new replies.