Support

Account

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

Solved

Adding a sub field to a repeater with JavaScript

    • micke

    • May 15, 2019 at 5:03 pm

    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

    • micke

    • May 21, 2019 at 6:05 pm

    Thanks! Got it to work!

    • pzh20

    • May 12, 2021 at 7:03 pm

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

    Many thanks
    Pete

    • pzh20

    • May 13, 2021 at 7:17 pm

    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.

    • pzh20

    • May 14, 2021 at 1:22 am

    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();
    
    • pzh20

    • May 25, 2021 at 7:42 am

    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…

    • pzh20

    • May 25, 2021 at 5:36 pm

    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.

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.