No JS errors on page. Success AJAX callback function does indeed run. (Is there any way to print JS errors from the AJAX request url?)
Matched ID in JS acf/setup_fileds trigger to the $options[‘form_attributes’][‘id’] from when setting up form.
Ran code after HTML was returned as well as attempted a 5000 milisecond timeout function to double check. (Not really necessary since the HTMl is returned before the AJAX success callback function is run).
If you are familiar with Zurb Foundation, I am using this JS to return the HTML within the container DOM:
LINK
$(".reveal-popup-button").click(function(event) {
event.preventDefault();
$("#my-popup-container").foundation("reveal", "open", {
url: ajaxurl,
action: "my_popup_ajax",
type: "POST",
success: function(data) {
$(document).trigger("acf/setup_fields", $("#acf-ajax-form"));
},
error: function() {
}
});
});
And here is my WP AJAX action:
function my_popup_ajax_callback() {
echo "<div id="my-popup-content">";
$args = array(
"post_title" => "Draft",
"post_status" => "draft",
);
$id = wp_insert_post( $args );
$html = my_popup_build_acf_form( $id, 12 );
echo $html;
echo "</div>";
die();
}
add_action( "wp_ajax_my_popup_ajax", "my_popup_ajax_callback" );
And the function that returns the form’s HTML:
function my_popup_build_acf_form( $id, $fieldgroup ) {
$options = array(
"post_id" => $id,
"field_groups" => array( $fieldgroup ),
"form_attributes" => array(
"id" => "acf-ajax-form"
),
"return" => add_query_arg( "updated", "true", get_permalink( $id ) ),
"html_field_open" => "<div>",
"html_field_close" => "</div>",
"html_before_fields" => "",
"html_after_fields" => "",
"submit_value" => "Submit",
"updated_message" => "Post updated.",
);
ob_start();
acf_form( $options );
return ob_get_clean();
}
