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

  • 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

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

The topic ‘Saving acf_form() through admin-ajax responds with 400 Bad Request’ is closed to new replies.