Home › Forums › General Issues › update_field() with Ajax
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.
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..?
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.
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.
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.
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!
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.