Home › Forums › General Issues › How do you update ACF fields in jQuery via dynamic ADJAX requests?
I’m trying to create a form where user data is captured via jQuery and sent to my custom field via the REST API in WordPress.
The HTML
<input class="new-note-title" placeholder="Title">
<textarea class="new-note-body" placeholder="Your note here..."></textarea>
<p>Thought Breakdown Boxs</p>
<span>
<textarea class="breakdown-1" placeholder="A ton of love"></textarea><p class="symbol">+</p>
<textarea class="breakdown-2" id="broken" placeholder="A possitive environment"></textarea><p class="symbol">=</p>
<textarea class="breakdown-3" placeholder="An environment for growth"></textarea>
</span>
<button class="submit-note fa fa-blind"> Save Thought</button>
Creating the custom field in rest
add_action('rest_api_init', 'test_custom_rest_vals');
function test_custom_rest_vals(){
register_rest_field('thought', 'breakdownPart_1', array(
'get_callback' => function(){ return get_field('lb-1'); }
));
register_rest_field('thought', 'breakdownPart_2', array(
'get_callback' => function(){ return get_field('lb-2'); }
));
register_rest_field('thought', 'breakdownPart_3', array(
'get_callback' => function(){ return get_field('lb-3'); }
));
}
jQuery Code The purpose here is to grab the text the user just typed and place it into the request
createNote(e) {
var theNewPost = {
'title': $(".new-note-title").val(),
'content': $(".new-note-body").val(),
"breakdownPart_1": $(".breakdown-1").val(),
'breakdownPart_2': $(".breakdown-2").val(),
'breakdownPart_3':$(".breakdown-3").val(),
'status': 'publish'
}
$.ajax({
beforeSend: (xhr) => {
xhr.setRequestHeader('X-WP-Nonce', siteData.nonce);
},
url: siteData.root_url + '/wp-json/wp/v2/lesson/',
type: 'POST',
data: theNewPost,
success: (response, theNewPost) => {
$(".new-note-title, .new-note-body, .breakdown-1, .breakdown-2, .breakdown-3").val(''); // empties everything in the boxes
console.log("Congrats");
console.log(response);
},
In the end all of my ‘title’ and ‘content’ data is transferring correctly and creating that new post successfully….but my custom fields are empty.
},
"template": "",
"breakdownPart_1": false,
"breakdownPart_2": false,
"breakdownPart_3": false,
Note: to troubleshoot I added the custom fields to my content box so…
'title': $(".new-note-title").val(),
'content': $(".new-note-body").val() + $(".breakdown-1").val() + $(".breakdown-2").val() + $(".breakdown-3").val(),
and that displayed / transferred successfully. So why are the other values not transferring to the rest?
I don’t know much about the rest api, but after reading this https://developer.wordpress.org/reference/functions/register_rest_field/, it appears to me that you’ll need to supply a function callback that updates the field “update_callback”.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
🚀 This week’s session of ACF Chat Fridays dips into the preliminary results of our first ever user survey. Don’t miss it! https://t.co/3UtvQbDwNm pic.twitter.com/kMwhaJTkZc
— Advanced Custom Fields (@wp_acf) May 9, 2023
© 2023 Advanced Custom Fields.
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.