Home Forums General Issues How do you update ACF fields in jQuery via dynamic ADJAX requests?


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>
             <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>
             <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(), 
            'status': 'publish'
          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

    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, it appears to me that you’ll need to supply a function callback that updates the field “update_callback”.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.