Use Javascript API to set Post_Object Value

• Jeff

• September 8, 2020 at 9:19 am

Good day all. I could use a second set of eyes on this and would appreciate your help.

I would like to be able to set the value of a Post Object using Javascript.

What I have done do far:

Gathered the first field with acf.getField. I am able to retrieve the value (post id) by using val().

var firstField = acf.getField('field_5f498c78d989');
var firstID = firstField.val();

Next I have tried setting the value the same way.

var secondField = acf.getField('field_5f498dfdfd99');
secondField.val( firstField );

I have also tried setting it as:

secondField.val( {value: firstField, title: "Title Here"} );

JS not being my strong suit, I have gone though the different object capabilities and feel I am missing the obvious. Additionally I tried to trigger .Ready for the field, but that just generated an error.

My preference is to be able to set the value using the post_id, which I have at this point.

What am I missing?

Respectfully,

Jeff

• John Huebner

• September 11, 2020 at 1:56 am

The only error I see in the code you posted is that

secondField.val( firstField );

should probably be

secondField.val( firstID );

• Jeff

• September 11, 2020 at 6:48 am

Thanks John,

I noticed that after I entered into the forums and compared to my code and it was a typo here.

Widening the look at my code:

    acf.add_action('append', function( $el ){

// The Keys
        layoutKey = 'field_5f498c46f5b9f';       // Layout
        fieldKey = 'field_58dd1b4f4b510';     // Post Object, returns a post id
        
// Vars

        var firstFields = acf.getFields({type: 'post_object', key: fieldKey });

        console.log ('Fields Loaded ... New Layout Appended');

// The Count / Index of new entry (Remember the first row is 0)

        theCount = firstFields.length;
        newEntry = firstFields.length - 1;

// Do we have an object we can work with?  Set a Status -- Yes this works

        firstFields[newEntry].showNotice({
        text: 'This is the field we are trying to set',
        type: 'success',
        dismiss: true
    });

// Retrieve value from Previous Layout 

    for (i = 0; i < theCount; i++) {
            // Get the value from the previous record
            if (i == (theCount - 2)) {

                priorValue = firstFields[i].val();    // is the post_id of the selected item

                console.log(priorValue);
            }

            if (i == newEntry) {

// Try and set the post id to the field

                firstFields[i].val(priorValue);
                
// Trying this ... no change.
                firstFieldsi].trigger('change');

 

            }

}

• Jeff

• September 11, 2020 at 6:51 am

Additionally, I changed the field to standard selects and text fields and it works as intended. Even without the trigger(‘change’)

When I try and use a post_object field the default ‘Select a Value’ remains displayed and the value does not set.

• Jeff

• September 11, 2020 at 6:55 am

Widening the look at my code:

    acf.add_action('append', function( $el ){

// The Keys
        layoutKey = 'field_5f498c46f5b9f';       // Layout
        fieldKey = 'field_58dd1b4f4b510';     // Post Object, returns a post id
        
// Vars

        var firstFields = acf.getFields({type: 'post_object', key: fieldKey });

        console.log ('Fields Loaded ... New Layout Appended');

// The Count / Index of new entry (Remember the first row is 0)

        theCount = firstFields.length;
        newEntry = firstFields.length - 1;

// Do we have an object we can work with?  Set a Status -- Yes this works

        firstFields[newEntry].showNotice({
        text: 'This is the field we are trying to set',
        type: 'success',
        dismiss: true
    });

// Retrieve value from Previous Layout 

    for (i = 0; i < theCount; i++) {
            // Get the value from the previous record
            if (i == (theCount - 2)) {

                priorValue = firstFields[i].val();    // is the post_id of the selected item

                console.log(priorValue);
            }

            if (i == newEntry) {

// Try and set the post id to the field

                firstFields[i].val(priorValue);
                
// Trying this ... no change.
                firstFieldsi].trigger('change');

 

            }

}

• Jeff

• September 11, 2020 at 7:07 am

John not sure what happened with the posts above, out of order and missing a key sentence.

Thank you for your help. I noticed the same thing and it was a typo here when I was describing my issue.

• John Huebner

• September 11, 2020 at 10:05 pm

So, I’ve run into similar issues with other field types in the past. For example, you can’t just set the value of an image field with the id and have the image appear. In that case I needed to do an AJAX request to get the image ID and the image URL for the correct size image after reading the image size attribute from the image field. Once I had this information I needed to set the image, set the url and also needed to add/remove classes in elements of the image field. Basically what I needed to do was to dig through the ACF code and figure out how ACF did it and then duplicate what it was doing.

In this case your dealing with a post object field which uses select2 and this is likely complicating matters. Without spending a great amount of time digging through ACF JS code and actually trying to build this myself I wouldn’t be able to tell you exactly what you need to do.

Going to be honest, in these cases I try to stick with basic field types that are easily manipulated, like the select field that you say works. It is usually not as pretty but it gets the job done.