How do you update ACF fields in jQuery via dynamic ADJAX requests?

• rclaude

• June 15, 2018 at 4:52 am

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?

• John Huebner

• June 15, 2018 at 9:39 pm

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