Support

Account

Home Forums ACF PRO Using acf-form() in ajax call

Solved

Using acf-form() in ajax call

  • 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');
    
  • 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

  • Fantastic, that worked.

    Loving ACF 5.0 by the way.

    Thanks Elliot!

  • 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

  • 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

  • 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)??

  • 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.

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

You must be logged in to reply to this topic.