Home Forums Front-end Issues Modal, AJAX, wp_editor and acf_form


Modal, AJAX, wp_editor and acf_form

  • Hi there

    I’ve got a question about loading up an ACF form via AJAX on the frontend.

    Here’s what I’m doing:

    1. I’m using Bootstrap Modal to provide some contextual links to edit forms
    2. I’m using a trigger on the modal to trigger an AJAX load of an ACF form (using WordPress’ provided AJAX hooks.

    Here’s some code:

    An example ‘edit’ button:

    <button data-modaltype="modalEditor" data-postid="77">Edit</button>

    The javascript to open the modal dialog and load an ACF form into it:

    jQuery(document).ready(function() {
      jQuery(document).on('', '#modalEditor', function(e) {
        ajaxUrl = '/wp-admin/admin-ajax.php';
          url: ajaxUrl + '?action=checklists_load_edit_form',
          type: 'post',
          data: {
             post_id: $(this).data('postId')
          success: function(data) {
            jQuery('#modalEditor .modal-body').html(data);
            console.log('#ajax_acf_' + $('#modalEditor').data('postId'));
          error: function(data) {
      jQuery('button[data-modalType="modalEditor"]').click(function($) {
        jQuery('#modalEditor').data('postId', jQuery(this).attr('data-postId'));

    Here’s my AJAX handler:

    function checklists_load_edit_form() {
      $post_id = $_POST['post_id'];
          'post_id' => $post_id,
            (function($) {
                jQuery(document).trigger('acf/setup_fields', jQuery("#post") );
                acf.do_action('ready', $('body'));
                acf.do_action('load', $('body'));
    add_action( 'wp_ajax_nopriv_checklists_load_edit_form',  'checklists_load_edit_form' );
    add_action( 'wp_ajax_checklists_load_edit_form','checklists_load_edit_form' );

    (as you can see there’s a bit of spraying and praying to try to get ACF to do some post-load preparation of the form, I’m not sure this is right but it seems to work)

    And now the subject of my question – I am using the following in functions.php of my theme in an attempt to get the WYSIWYG editor to render correctly in an AJAX-loaded ACF form:

    add_action('wp_enqueue_scripts', 'checklists_scripts');
    add_action('wp_head', 'acf_form_head');
    add_action('wp_foot', 'acf_enqueue_uploader');
    function checklists_scripts() {
      wp_enqueue_script('checklists-modals', get_stylesheet_directory_uri() . '/js/modals.js', array('jquery'));

    The ugliest bit is the where I try to force WordPress to load the WYSIWYG editor javascript / css libraries by calling wp_editor() inside a buffer which I then discard.

    This seeeeeeeems to work – but – it seems like a really ugly hack to make WYSIWYG load properly.

    Is there a better way to do it?

  • Hey, not sure if you still need help with this, trying to clean up some old questions. I don’t really have an answer for the way you are attempting to do this, but I do have a suggestion for an easier way to do this. I try to do things in the simplest way so that I can get it done faster.

    If I were to attempt to do this I would load an iframe into the modal window. I’d create a special template that had only what was needed to make the page and acf_form() work.

    Then you can use acf/pre_save_post or even acf/save_post hooks to do whatever you want to do with the posted data, including put it somewhere else.

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

The topic ‘Modal, AJAX, wp_editor and acf_form’ is closed to new replies.