generating acf form with ajax

• e-crespo

• October 27, 2014 at 1:33 pm

Hello,

Can anyone tell me how (or provide some coding example) generate an acf form via ajax, so I can append it to some div or modal window later.

My problem is that some fields, like media upload, are not initialized properly. I understand that because those are new fields that have been not initializated. After reading documentation I found this to let ACF know there are new fields on the page which may require some JS initializing.

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

But it is not clear to me where, when or how to add it. I asked for support with no help and check other similar threads with no help either. I am not an expert in ajax and I am sure this is quite easy to do, I feel like I am missing some evident part or hint.

Thanks in advance.

• turillo

• November 3, 2014 at 12:09 am

Hello guys
This question is interesting
I’m having a trouble with acf_form since I updated to version 5.1.1 acf pro.
(I state that in the version of acf 4 everything worked great)
The conditional logic on the front end does not work
It seems that the problem can be solved by using the code mentioned by e-crespo,
since my theme uses ajax to create everything.

Elliot I hope you will help us to better understand the usage of this code.

Thank you for what you do

• turillo

• November 3, 2014 at 1:20 am

if can help, this is the error code that generates on the fron-end

Uncaught Error: Syntax error, unrecognized expression: .acf-field[data-key=”function (){var d=[];
for(var b=0,a=this.length;b<a;b++){var c=typeOf(this[b]);if(c==”null”){continue;}d=d.concat((c==”array”||c==”collection”||c==”arguments”||instanceOf(this[b],Array))?Array.flatten(this[b]):this[b]);
}return d;}”] jquery.js?ver=1.11.1:2fb.error jquery.js?ver=1.11.1:2fb.tokenize jquery.js?ver=1.11.1:2fb jquery.js?ver=1.11.1:2m.fn.extend.find jquery.js?ver=1.11.1:2acf.get_fields input.min.js?ver=5.1.1:1acf.conditional_logic.acf.model.extend.change input.min.js?ver=5.1.1:1(anonymous function) input.min.js?ver=5.1.1:1m.event.dispatch jquery.js?ver=1.11.1:3r.handle

• e-crespo

• November 6, 2014 at 9:12 am

I am trying to get some customer support to solve this, but yet no luck as they keep providing the code above, that is attached to the php function handling the ajax call, the one that generates the acf form. But it is still not working.

Media upload fields, WYSIWYG, conditional logic and repeater (I guess any field that requires some sort of JS initialization) are not working properly if the form is generated via ajax. For example I still get this simple error for media fields, which clearly indicates that js snippet they are providing is not initializating the media field correctly:

TypeError: wp.media is undefined
xxx.xxx.xxx/wp-content/plugins/advanced-custom-fields-pro/js/input.min.js?ver=5.0.9 line 1

I wonder if someone out there has managed to do this really essential thing, as for all the people out there using ajax to generate forms this is very much needed, and if this is impossible to do with acf, please I encourage acf team to state it clearly in the features before people waste their money and time on this and can give a try to other plugins for front-end edition via ajax.

• goldhat

• December 5, 2015 at 6:06 pm

I’m also struggling to get a working ACF form created by ajax. I’ve tried a couple of the acf.do_action methods that I found but none fully solved the issues. I will say my form has working js validation, and a working select list filter… so it mainly working, and maybe this sample code will help somebody with the issues they are finding. What I can’t get around, is that when I submit the form I land on /wp-admin/admin-ajax.php?updated=true because the ajax doesn’t seem to apply preventDefault() and it acts like a non-ajax form submission.I tried adding my own .submit and using preventDefault but then the form never submits and I see the ajax circle loading endlessly and no data is saved. So using your own preventDefault in a submit handler seems to break the form processing by ACF.

$.post( devcoreAjax.url, data, function( response ) {
        $('#add-record .modal-body').html( response );
        acf.do_action('append', $('#add-record .modal-body form') );
        acf.do_action('ready', $('#add-record .modal-body form') );

        $('#add-record .modal-body form').submit( function(e) {
          e.preventDefault();
        });

        $('#add-record').modal('show');
      });