Support

Account

Home Forums Add-ons Repeater Field Load Select Post Subfields on Repeater

Solved

Load Select Post Subfields on Repeater

  • I have got 2 custom post type like as products and sells.

    Products post type have ACF;

    Title ( pro_title )
    Product Explanation ( pro_exp )
    Product Price ( pro_prc )
    Product Bonus ( pro_bonus )

    Sells post type have ACF;
    In Repeater:
    Product ( Select Post Object )
    Product Explanation ( sell_pro_exp )
    Product Price ( sell_pro_prc )
    Product Bonus ( sell_pro_bonus )

    I want to get values ( pro_prc pro_bonus etc. ) from products post type when i select product in repeater for autofill the repeater fields.

    Step by Step:
    I add a product to products post type.
    I add a new sell to sells post type.
    When i select a product, get products values and write it to related box ( sell_pro_prc sell_pro_bonus etc. )

    How can i do this?

  • To do this you have to add custom JS to ACF, use the ACF JS API to get the value of the field, and then you have to do your own AJAX request to get the values of the other fields.

    I do not have a working example. This example does not work with the new ACF JS API https://github.com/Hube2/acf-dynamic-ajax-select-example/tree/master/dynamic-fields-on-relationship but it does something similar. It loads other fields based on a relationship field.

    This one has a working example of doing an AJAX request based on a select field change https://github.com/Hube2/acf-dynamic-ajax-select-example/tree/master/dynamic-select-example.

    When working with repeaters you must target the row where the updated field was changed.

  • Hi John thanks for your reply.

    When working with repeaters you must target the row where the updated field was changed.

    Yeah, i think i can’t do this 🙂

    JS:

    jQuery(document).ready( function($) {
        var valueCheck;
        $('#acf-field_5e7c9a8b2e9ca-row-0-field_5e7c9ad82e9cc').on( 'change', function () {
             valueSelect = $(this).val();
             if ( parseInt ( valueSelect ) > 0 ) {
            $.ajax({
                type: 'POST',
                url: '/wp-admin/admin-ajax.php',
                data: {
                    action: 'proprice',
                    value: valueSelect
                }, 
                error: function (data) {
                    console.log(data);
                }, 
                success: function (data) {
    
                   console.log(data);
                   if ( data == '') {
                      $('#acf-field_5e7c9a8b2e9ca-row-0-field_5e7c9ad82e9cd-field_5e7c9ad82e9d0').val( '<span>Bu #id: ' +  valueSelect + ' ye ait bir içerik bulunamadı.</span>' );
                   }
                   else {
                      $('#acf-field_5e7c9a8b2e9ca-row-0-field_5e7c9ad82e9cd-field_5e7c9ad82e9d0').val( data );
                   }
    
                }
        });
             }
        });
    });

    PHP Func:

    function pricepointer(){
    $id = $_POST['value'];
    $sonucum =  the_field('pro_prc', $id);
    echo $sonucum;
    die();
    }
    add_action ( 'wp_ajax_proprice', 'pricepointer' );
    add_action ( 'wp_ajax_nopriv_proprice', 'pricepointer' );

    I get data with this code. But repeater give a unique and random row number. I can’t select 🙁 I try too much things like as “nth-child” selector. But doesn’t work. Have you got any idea?

  • I would probably do something like this for the on change event

    
    $('[data-key="field_5e7c9a8b2e9ca"] .acf-row [data-key="field_5e7c9ad82e9cc"] .acf-input input').on(...
    

    Not that above the final “input” is the type of input field used. the first data-keu is the key of the repeater. The second data key is the key of the sub field.

    However, this will not work. The reason for this is that the repeater row may not exist and in this case you must do it differently so that you can target elements that are dynamically created by JS, like this

    
    $(document).on(
      'change',
      '[data-key="field_5e7c9a8b2e9ca"] .acf-row [data-key="field_5e7c9ad82e9cc"] .acf-input input',
      function(e) {
        // your function code here
      }
    );
    

    and then get the row that you are working on

    
    var row = $(this).closest('.acf-row');
    

    Then you target the sub field you want to change by doing the following same not as above about the type of field.

    
    var other_field = row.find('[data-key="field_5e7c9ad82e9d0"] .acf-input input')
    
  • John! You are my darling! 🙂

    But this doesn’t work :/

    var row = $(this).closest('.acf-row');

    var other_field = row.find('[data-key="field_5e7c9ad82e9d0"] .acf-input input')

    I change my code to:

    jQuery(document).ready( function($) {
        var valueCheck;
        $('[data-key="field_5e7c9a8b2e9ca"] .acf-row [data-key="field_5e7c9ad82e9cc"] .acf-input select').on( 'change', function () {
             valueSelect = $(this).val();
             if ( parseInt ( valueSelect ) > 0 ) {
            $.ajax({
                type: 'POST',
                url: '/wp-admin/admin-ajax.php',
                data: {
                    action: 'proprice',
                    value: valueSelect
                }, 
                error: function (data) {
                    console.log(data);
                }, 
                success: function (data) {
    
                   console.log(data);
                   if ( data == '') {
                      $('[data-key="field_5e7c9ad82e9cd"] .acf-fields [data-key="field_5e7c9ad82e9d0"] .acf-input input').val( '<span>Bu #id: ' +  valueSelect + ' ye ait bir içerik bulunamadı.</span>' );
                   }
                   else {
                      $('[data-key="field_5e7c9ad82e9cd"] .acf-fields [data-key="field_5e7c9ad82e9d0"] .acf-input input').val( data );
                   }
    
                }
        });
             }
        });
    });

    I’m sorry about that but my javascript language is too bad 🙂

    var row = $(this).closest('.acf-row');

    var other_field = row.find('[data-key="field_5e7c9ad82e9d0"] .acf-input input')

    Where should I add these codes?

  • This example is for a select field that changes the selections in s second select field, but does not deal with the repeater https://github.com/Hube2/acf-dynamic-ajax-select-example/tree/master/dynamic-select-example.

    In order to work with repeaters it is important to do the other setps

    
    valueSelect = $(this).val();
    var current_row = $(this).closest('.acf-row');
    var field_to_change = current_row.find('[data-key="key of other field"] .acf-input FIELD TYPE');
    

    I’m not really sure about the $(this) part. As you can see in the example I gave you, I generally work with the value passed to the function in “e” the event. $(e.target) gives me element that triggered the event.

    
    $(document).on('change', '{SELECTOR}, function(e) {
      var target = $(e.target);
      var row = target.closest('.acf-row');
      var field_to_change = row.find(['data-key="{FILED KEY}"] .acf-input {FIELD TYPE}');
    
  • If you were with me right now, I could hug you!

    You are awesome!

    For other users :

    jQuery(document).ready( function($) {
        var valueCheck;
        $(document).on( 'change', '.acf-row .acf-fields [data-key="field_5e7c9ad82e9cc"] .acf-input select', function (e) {
          var target = $(e.target);
    	  var cow = target.closest('.acf-row');
          var ofi = cow.find('.acf-fields [data-key="field_5e7c9ad82e9d0"] .acf-input input');
             valueSelect = $(this).val();
             if ( parseInt ( valueSelect ) > 0 ) {
            $.ajax({
                type: 'POST',
                url: '/wp-admin/admin-ajax.php',
                data: {
                    action: 'proprice',
                    value: valueSelect
                }, 
                error: function (data) {
                    console.log(data);
                }, 
                success: function (data) {
    
                   console.log(data);
                   if ( data == '') {
                      $(ofi).val( '<span>Bu #id: ' +  valueSelect + ' ye ait bir içerik bulunamadı.</span>' );
                   }
                   else {
                      $(ofi).val( data );
                   }
    
                }
        });
             }
        });
    });
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.