Using acf-form() in ajax call

• Bones

• October 1, 2014 at 3:35 am

Hi,

I am attempting to use acf_form() in an Ajax call that opens the form in a modal window.

This works as expected apart from the jquery for the form does not appear to be loading. Any multi-select or upload fields do not work

Is there I need to do to get jquery working the form in the ajax window?

I’m using ACF Pro, code below.

Thanks!

	 	jQuery.ajax({
			type : "post",
			dataType : "html",
			url : the_ajax_script.ajaxurl,
			data : {
				action: "add_line",
		        post_var: 'AJAX error',
            	location: newLineLayer.getSource().getFeatures()[0].getGeometry().getCoordinates()
			},
			success: function(response) {
				openModal(response);
			}
        })

function add_line_ajax() {

  	if ( isset( $_POST["post_var"] ) ) {
		
		$form_args = array(
			'post_id' => 'new_post', 
			'new_post' => array(
					'post_type' => 'line',
					'post_status' => 'publish'
				),
			'post_title' => true,
			'submit_value' => 'Add Line',
			'updated_message' => 'Line added',
			'return' => add_query_arg( 'updated', 'true', get_site_url() . '/centre/'), // return url
			'html_after_fields' => $button_html,
		);

		acf_form($form_args);

		die();
	}
}
add_action('wp_ajax_add_line', 'add_line_ajax');

• Elliot

• October 1, 2014 at 12:39 pm

Hi @Bones

Great question. I should realy add this to the docs, but for now, please add the following inline JS to your popup HTML (below the acf_form call)

<script type="text/javascript">
(function($) {
	
	// setup fields
	acf.do_action('append', $('#popup-id'));
	
})(jQuery);	
</script>

* change ‘#popup-id’ to the selector which will target the popup HTML element

Thanks
E

• Bones

• October 1, 2014 at 6:15 pm

Fantastic, that worked.

Loving ACF 5.0 by the way.

Thanks Elliot!

• e-crespo

• October 21, 2014 at 2:00 pm

Hi,

I am having the same problem, but I cannot manage to make it work, could you provide a working example code to check where exactly has that JS snippet to be added and how?

Thanks in advance

• DenFunk

• November 4, 2014 at 7:06 am

There are problems with WYSIWYG and image field.

My code:

jQuery(document).ajaxComplete(function($){
    acf.do_action('append', $('#post'));
    $(document).trigger('acf/setup_fields', $('#post'));
});

taxonomy fields don’t have such problems

• e-crespo

• November 6, 2014 at 9:26 am

someone that can throw some light on how to make ajax-generated acf forms to work properly with the media, WYSIWYG, conditional, etc (all the fields that require JS initialization)??

• shankie

• February 19, 2015 at 4:48 am

Hey @e-crespo

Is it possible that you’re not calling acf_form_head() in your PHP somewhere prior to any markup being rendered? It’s easy to forget to do this if you’re bringing your actual acf_form() in via AJAX.

In the end, we’re building our own front-end forms that post manually to ACF in the PHP handlers as acf_form_head wasn’t playing particularly nicely with some other stuff that we had going on.