Support

Account

Home Forums Front-end Issues acf-form() in ajax call : how to fire the action ? Reply To: acf-form() in ajax call : how to fire the action ?

  • 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