Support

Account

Home Forums General Issues update_field() with Ajax

Solving

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

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

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

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

You must be logged in to reply to this topic.

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.