Support

Account

Home Forums Backend Issues (wp-admin) Issues with Ajax dropdown change not fired

Solving

Issues with Ajax dropdown change not fired

  • Hi

    i have issues with Ajax function only working on new created Repeater rows, and not the old ones with existing data.
    I am changing some values in repeater. I allso have issues with it updating all rows instead of just the single row, when i cahnge value in my dropdown.

    function success(data) {

    console.log(“Fired”);

    var title = jQuery(‘[data-key=”field_6144c465a849c”]’).closest(‘[data-key=”field_6144c465a849c”]’).find(“input”);

    title.val(data.title);

    for (var i = 0; i < data.image.length; i++) {

    console.log(data.image[i].id);

    jQuery(‘.acf-gallery-main’).append(“<div class=’acf-gallery-attachment’ data-id='” + data.image[i].id + “‘><input type=’hidden’ name=’acf[field_6144c42ea849b][row-0][field_6144c49fa849e][]’ value='” + data.image[i].id + “‘><div class=’margin’><div class=’thumbnail’></div></div><div class=’actions’></div></div>”);

    }

    }
    `

    Regards Martin

  • When updating a value in a repeater you need to use you need to already know one of the other fields in the repeater on the same row.

    
    // "field" represents the field that was changed
    var field_to_update = field.closest('.acf-row').find('[data-key="key to field you wan to update"] .acf-input input');
    

    I’m not sure what else you are doing in your code.

    To trigger something that happens in a single row your action needs to be attache to each row and in addition to this it must be done on the document not on the specific field because the fields are added using JavaScript so they may not exist at the time your trigger is added.

    
    $(document).on('change', '[data-key="key of sub field in repeater"] .acf-input input'
    

    the last part of the selector (“input”) will need to be changed based on the field type you want the action added to.

  • Hi John thank you, i have seen your ansver on another thread, and i have tried to follow some of your explanations, sry i did not post my action, only my success.

    
     acf.addAction("new_field/key=field_6144c3e80231d", function($field) {
    
                    $field.on("change", function(e) {
                        var value = $field.val();
    
                        // ajax request
                        jQuery.ajax({
                            type: "POST",
                            dataType: 'text',
                            url: ajax_url,
                            data: {
                                action: 'call_update', 
                                postId: value,
                                nonce: wp_nonce
                            },
                            success: function(response) {
    
                                data = JSON.parse(response);
    
                                success(data);
                            },
                            error: function(jqxhr, textStatus, errorThrown) {
                                console.log(errorThrown);
                            }
                        });
    
                    });
                });
    

    But basicly, i should just check $(document).on(‘change’ in my success method. I will give it a go, and see if i can get it to work

    Regards Martin

  • I’m not completely familiar with the acf js api in this case.

    I would first figure out if the “on” function is actually being called

    
    $field.on("change", function(e) {
      console.log('my function was called');
    

    Then I would figure out if the AJAX request is working.

    Then, using the code you are using you will need to pass the current field to the function that updates the other field so that you can find that field. The field shold be in “e” somewhere in this case.

    Unfortunately I also do not know how to use the ACF JS API to find sibling fields in a repeater, or even if it is possible. I have a tendency to side-step the API.

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

You must be logged in to reply to this topic.