update_field() with Ajax

• igitz

• January 30, 2020 at 8:39 am

Sorry for the double thread but I assume nobody responds to the ‘Solved’ ones.
I’m following the example I found here to update a Custom Field via Ajax:
https://support.advancedcustomfields.com/forums/topic/use-update_field-with-ajax/

What I have done is:

(1) Add html form to my single-(post-type).php

<form id="test-form" action="">
<input type="text" name="input-test" value="<?php the_field('field-name'); ?>">
<input type="submit" value="Update">
</form>

(2) Update_field function in functions.php

function test_function() {
	$input_test = $_POST['input-test'];
	if (!isset($input_test) || $input_test == "") { $input_test = "Fall Back"; }
	update_field('field-name', $input_test);
	wp_die();
}
add_action( 'wp_ajax_nopriv_test_function',  'test_function' );
add_action( 'wp_ajax_test_function','test_function' );

(3) Enqueue Js script in functions.php

function theme_scripts() {
	wp_enqueue_script( 'functionality', get_template_directory_uri() . '/js/functionality.js', array ( 'jquery' ), 1.1, true);

	wp_localize_script('functionality', 'MyAjax',
	array(
		'ajaxurl' => admin_url('admin-ajax.php'),
		'postCommentNonce' => wp_create_nonce('myajax-post-comment-nonce')
	)
);
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

(3) Create Javascript file js/functionality.js

jQuery(document).ready(function() {
  var ajaxurl = 'http://'+window.location.host+'/wp-admin/admin-ajax.php';
  var form = "#test-form";
  jQuery(form).submit(function(event) {
    event.preventDefault();
    jQuery.ajax({
      url: ajaxurl + "?action=test_function",
      type: 'post',
      data: jQuery(form).serialize(),
      success: function(data) {
        console.log("SUCCESS!");
      },
      error: function(data) {
        console.log("FAILURE");
      }
    });
  });
});

Not sure what I’m doing wrong. I get ‘Success’ but the field doesn’t get updated.

• igitz

• January 31, 2020 at 11:07 pm

i’ve also tried a variation of this following the instructions shown here: https://www.youtube.com/watch?v=Z0Jw226QKAM
same result. the field doesn’t get updated.
can anyone offer some advice..?

• John Huebner

• February 3, 2020 at 3:37 am

In your second code snippet, you will need to provide the post ID of the post you’re updating.

function test_function() {
	$input_test = $_POST['input-test'];
	if (!isset($input_test) || $input_test == "") { $input_test = "Fall Back"; }
	update_field('field-name', $input_test, $post_id); // specify post ID
	wp_die();
}
add_action( 'wp_ajax_nopriv_test_function',  'test_function' );
add_action( 'wp_ajax_test_function','test_function' );

You will either need to add a hidden field your form that has the post ID and submits it or you will need to localize your script with the current post ID that you can add to the form submission. I’d probably go with the hidden post ID field because of the way you script submits the form.

• igitz

• February 3, 2020 at 8:25 pm

thanks, i didn’t know that. i’d rather go with Option B (localize script with current post id). This is a test, so the way of submitting the info will change a lot. Could you give me an example of that?

However there’s one more problem. Even if the post id is correct, the $input_test variable falls to ‘Fall Back’ which means $_POST[‘input-test’] reads an empty string instead of the value of the input with the name input-test.

• John Huebner

• February 4, 2020 at 11:47 am

To be honest, I’m not sure I can. You’re using this data: jQuery(form).serialize(), to submit the form data and you would need to add the post ID to this data. I don’t actually know how you would do this. This is why I’d use a hidden form field with the post ID to be updated.

• NorinaKen

• May 26, 2022 at 5:32 am

How update custom fields with ajax ?