Home › Forums › Front-end Issues › 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:
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?
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.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
🚀 This week’s session of ACF Chat Fridays dips into the preliminary results of our first ever user survey. Don’t miss it! https://t.co/3UtvQbDwNm pic.twitter.com/kMwhaJTkZc
— Advanced Custom Fields (@wp_acf) May 9, 2023
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.