Modal, AJAX, wp_editor and acf_form

• shaunj.mr

• April 24, 2015 at 9:16 pm

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('show.bs.modal', '#modalEditor', function(e) {
    ajaxUrl = '/wp-admin/admin-ajax.php';
    jQuery.ajax({
      url: ajaxUrl + '?action=checklists_load_edit_form',
      type: 'post',
      data: {
         post_id: $(this).data('postId')
      },
      success: function(data) {
        //console.log(data);
        jQuery('#modalEditor .modal-body').html(data);
        console.log('#ajax_acf_' + $('#modalEditor').data('postId'));
      },
      error: function(data) {
        console.log(data);
      }
    });
  });
  
  jQuery('button[data-modalType="modalEditor"]').click(function($) {
    jQuery('#modalEditor').data('postId', jQuery(this).attr('data-postId'));
    jQuery('#modalEditor').modal('show');
  });
});

Here’s my AJAX handler:

function checklists_load_edit_form() {
  $post_id = $_POST['post_id'];
  acf_form(
    array(
      'post_id' => $post_id,
    )
  );
  
?>
    <script>
        (function($) {
            jQuery(document).trigger('acf/setup_fields', jQuery("#post") );
            acf.do_action('ready', $('body'));
            acf.do_action('load', $('body'));
            acf.fields.wysiwyg.initialize();
        })(jQuery);
    </script>
<?php
  
}
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'));
  wp_enqueue_script('wp-mediaelement');
  wp_enqueue_script('tiny_mce');
  wp_enqueue_script('editorremov');
  wp_enqueue_script('media-upload');
  ob_start();
  wp_editor();
  ob_end_clean();
}

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?

• John Huebner

• June 17, 2015 at 7:40 am

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.