Support

Account

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

Solved

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!

  • 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

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

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

You must be logged in to reply to this topic.

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.