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 );
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');
}
}
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.
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');
}
}
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.
