Support

Account

Home Forums Front-end Issues Use Javascript API to set Post_Object Value

Solving

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

  • 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.

  • 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.

Viewing 7 posts - 1 through 7 (of 7 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.