Support

Account

Register Login

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

Solving

acf-form() in ajax call : how to fire the action ?

  • Hello,

    I use ACF PRO and acf_form() to build a front end form.

    I open a modal with the ACF form loaded with ajax.

    Everything works except for some type of field like textarea with editor : the editor doesn’t show up.

    Or with taxonomy field : i can see the taxonomy terms but the field is just a list of terms (no tags).

    I’ve made some research and it appears that when my modal is opened and the ACF field is loaded with ajax, the necessary JS files are not loaded. In documentation or on topics, i always see that i should add :

    acf.do_action('append', $('#popup-id'));

    I’ve tried to add this code in the modal, in the success call back, everywhere and i’ve never succeed to make it works.

    Could you please explain me how to load this js file when i call a popup which load the form in AJAX ? Or give the js file name so i could load them ?

    Thank’s !

  • How is the modal loaded? Is it a div inserted into the page? Is it in an iFrame? The problem is that the needed JS for the fields you mention isn’t being loaded because the fields are loaded later.

    I just found this older topic where the developer answer this, let me know if it still works. https://support.advancedcustomfields.com/forums/topic/using-acf-form-in-ajax-call/, or is this what you’re referring to.

    If it’s still not working then make sure you’re calling `acf_form_head()’ and ‘wp_footer’ in the right places, these are other causes for things not working correctly.

  • 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

  • At this point I’m going to suggest that you open a new support ticket https://support.advancedcustomfields.com/new-ticket/, I think it will be your best chance to get the help you need.

  • Hello there,

    Any feedback on this ?

    I’m wondering if it’s possible to present ACF front end forms in modal window with the current ACF logic.

    Especially if multiple (different) forms could be presented on the same page, in my case.

    Thanks for any useful feedback !

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

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

The topic ‘acf-form() in ajax call : how to fire the action ?’ is closed to new replies.