Support

Account

Home Forums Backend Issues (wp-admin) Saving acf_form() through admin-ajax responds with 400 Bad Request

Solved

Saving acf_form() through admin-ajax responds with 400 Bad Request

    • Thomas

    • December 12, 2018 at 7:49 pm

    Hey everyone,

    It’s pretty amazing that I can have the ACF form on my custom edit screen in WordPress, but it doesn’t quite work yet. Maybe you can help?

    My plugin creates a modal window to edit a custom post type. Alongside the post type’s fields in that modal I added an area where custom fields can be edited through the ACF form.

    My approach:
    – I used acf_form_head(); in my plugin’s init function
    – I use ajax to get the form contents when opening the modal

    
    $post_id = $_POST['tecal_events_post_id'];
    if( function_exists( 'acf_form' ) ) {
      acf_form( array( 'post_id' => $post_id ) );
      wp_die();
    } else {
      echo '';
      wp_die();
    }
    

    – Then I already use ajax to save the contents of my form, but I would also like to save the custom field’s data through ajax after saving my own fields.
    – So I removed the submit button from the ACF form (which works great, but reloads the page and it looks a bit weird to have two submit buttons next to each other, one for the default fields and one for the custom fields.)
    – Then I tried using this code to submit the ACF data, after the post’s other data is saved

    
    $.ajax({
      url: ajaxurl,
      method: 'post',
      data: $(acf_form).serialize(),
      success: () => {
        // Close modal
        complete(e);
      }
    });
    

    Here comes the problem: I always get 400 Bad Request and a 0 as response from admin-ajax. But why is it a bad request? Do I need to send the data as JSON?

    I tried so many different things now, that I have to take a break and wanted to ask the experts in this forum 🙂

    Thomas

    • Thomas

    • December 13, 2018 at 4:51 am

    Apparently this is not supposed to be done like this, or I’m just stupid 😀

    I ended up sending the data along with my already sent custom JSON for my custom post type like this:

    
    // Add ACF data to our update request, if available.
    var acf_form = $('.has_acf #acf-form');
    if(acf_form) {
      // Serialize data in acf form.
      var acf_data = $(acf_form).serializeArray();
      // Apply every field to the data object, we're sending.
      for(var i = 0; i < acf_data.length; i++) {
        var field = acf_data[i];
        data[field.name] = field.value;
      }
    }
    

    Originally, I wanted to avoid doing anything more complicated on the PHP side, but it turned out to be quite easy. I added the following statements to the new and update ajax methods:

    
    // Update ACF Fields
    if( function_exists( 'update_field' ) && isset( $_POST['acf'] ) ) {
      foreach( $_POST['acf'] as $field_name => $field_value ) {
        update_field( $field_name, esc_attr( $field_value ), $post_id );
      }
    }
    

    It seems to work fine 🙂 (I just want basic support, didn’t test repeaters and more complicated fields.)

Viewing 2 posts - 1 through 2 (of 2 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.