• Cloud Nine

• in reply to: acf-form() in ajax call : how to fire the action ?
• October 8, 2017 at 11:35 pm

Hello, yes it is possible.
I’ve done this on a website where user can edit each different ACF fields in a modal (or side bar in my case) ans save the content with ajax. The fiels were attached to buddy press profile so it was not so easy but it works.
Sorry, i’ve handle this functionality this is more than a year and i can’t give you the complete process here.

• Cloud Nine

• in reply to: acf-form() in ajax call : how to fire the action ?
• May 13, 2016 at 6:12 pm

Hello,

Thank your for your reply.

The modal is in the main page and the content is loaded with an ajax call. I use wordpress ajax :

php :

function load_acf_form_ajax() {

    // variables
    if (!empty($_POST['fields_key']) && !empty($_POST['user_id'])) {
        $fields_key = $_POST['fields_key'];
        $user_id = $_POST['user_id'];

        // formulaire ACF form
        $options = array(
            'post_id' => 'user_' . $user_id, // $user_profile,
            'fields' => array($fields_key),
            'form' => true,
            'submit_value' => 'Valider'
        );

        acf_form($options);
        
        
    } else {
        echo 'erreur';
    }

    get_template_part('templates/modal-edit-acf');

    die();
}

JS :

jQuery.post(
                        ajaxurl,
                        {
                            'action': 'load_acf_form_ajax',
                            'fields_key': $field_key,
                            'user_id': <?php echo $user_id_parameter; ?>
                        },
                        function (response, status) {
                            //console.log(response);
                            $('#modal_content').html(response);
                            console.log('status : ' + status);

                            if (status === 'success') {
                                console.log('acf.do_action');
//                                acf.do_action('ready', $('#modal_content'));
//                                acf.do_action('load', $('#modal_content'));
//                                acf.fields.wysiwyg.initialize();
                                acf.do_action('append', $('#modal_content'));
//                                $(document).trigger('acf/setup_fields', $('#modal_content'));
                            } else {
                                $('#modal_content').html(status);
                            }
                        }
                );

Eliot helped me to debug this.

It was simple (i don’t know how i could miss it).

The solution is : trigger the ‘append’ action within the ajax success function after you have appended your HTML

So, now it works but i still have issue with the wysiwyg editor, or the datepicker.

It is due to missing JS files on the page because form is run within an AJAX call.

I know i have to add acf_enqueue_uploader(); but it still doesn’t wok.

Regards,

Sébastien