ACF + Ajax; certain JS functionalities missing

• JasperV

• April 30, 2019 at 8:10 pm

Situation & Problem
I’m implementing a custom admin page that gets ACF fields based on a selection.
Everything is working fine, including the showing and saving of the fields.

However, after a field is loaded using Ajax, certain JavaScript functionalities are not working:

• In a repeater field, the add row button does nothing, it also shows nothing in the console when clicked.
  According to my browser a click event IS bound to it from acf-input.js:
  return a.apply(b || this, c.concat(e.call(arguments)))
• In a wysiwyg field, the Visual button does not work. When clicked it shows the following error in the console: TypeError: r is undefined [tinymce.min.js]

Am I maybe supposed to perform a JavaScript call to initialise the newly loaded fields? Or is there something wrong with my implementation of ACF?

Info on my implementation
Initial page load
On initial page load I run acf_enqueue_scripts(); to load all ACF scripts/styling.

Getting fields with Ajax
On the page when a selection is made, an Ajax call is made to a custom route which performs the following to get the fields HTML:

// get fields based on group key received from POST request
$fields = acf_get_fields(['key' => $key]);

// render fields, and use output buffering to catch the HTML
ob_start();
acf_render_fields($fields, 'my-page');
$fields_html = ob_get_contents();
ob_end_clean();

return $fields_html;

Which successfully returns the required HTML to the page.

Saving Fields
I very simply perform a POST with all the fields to a route which performs the acf_save_post('my-page') function.
This function gets the fields from the request and saves them, which works wonderfully.

• JasperV

• April 30, 2019 at 8:11 pm

Situation & Problem
I’m implementing a custom admin page that gets ACF fields based on a selection.
Everything is working fine, including the showing and saving of the fields.

However, after a field is loaded using Ajax, certain JavaScript functionalities are not working:

• In a repeater field, the add row button does nothing, it also shows nothing in the console when clicked.
  According to my browser a click event IS bound to it from acf-input.js:
  return a.apply(b || this, c.concat(e.call(arguments)))
• In a wysiwyg field, the Visual button does not work. When clicked it shows the following error in the console: TypeError: r is undefined [tinymce.min.js]

Am I maybe supposed to perform a JavaScript call to initialise the newly loaded fields? Or is there something wrong with my implementation of ACF?

Info on my implementation
Initial page load
On initial page load I run acf_enqueue_scripts(); to load all ACF scripts/styling.

Getting fields with Ajax
On the page when a selection is made, an Ajax call is made to a custom route which performs the following to get the fields HTML:

// get fields based on group key received from POST request
$fields = acf_get_fields(['key' => $key]);

// render fields, and use output buffering to catch the HTML
ob_start();
acf_render_fields($fields, 'my-page');
$fields_html = ob_get_contents();
ob_end_clean();

return $fields_html;

Which successfully returns the required HTML to the page.

Saving Fields
I very simply perform a POST with all the fields to a route which performs the acf_save_post('my-page') function.
This function gets the fields from the request and saves them, which works wonderfully.

• John Huebner

• May 12, 2019 at 5:26 am

More than likely some important markup is missing that is causing ACF JS to be unable to find the fields that need to be initialized.

The markup on your page needs to be exactly the same as it would be if ACF was showing the content on a options page created in ACF.

Another possible problem is that ACF is not loading all of the needed scripts because it is not a post, term, user, acf options page, or some other type of object that ACF can normally be added to and ACF is detecting this an not loading some things.

• JasperV

• May 13, 2019 at 9:47 pm

Thanks for the answer @hube2 . I decided to compare my page to a regular acf options page created using acf_add_options_page().

ACF is not loading all of the needed scripts
By default ACF doesn’t load the scripts, no, but I make use of acf_enqueue_scripts() which loads the same two acf javascript files a regular options page loads (acf-input & acf-pro-input).

The markup on your page needs to be exactly the same
My page, just like an options page, is loaded as a WordPress admin page. The rendering of the form itself is handled by ACF, the exact page doesn’t look the same but I doubt this would be an issue.

.

• JasperV

• May 13, 2019 at 9:54 pm

ACF is probably used to initialising on page load. However my fields are loaded using AJAX, and need to be initialised whenever loaded.

Maybe there’s a JavaScript function I could call to initialise all fields on the page? :S

• John Huebner

• May 13, 2019 at 9:57 pm

I can’t actually answer that question (I am not an ACF dev), but you are probably correct. ACF will not know that the fields need to be initializes if they are not loaded/there on page load. I don’t know how you can work around this.

• JasperV

• May 13, 2019 at 10:14 pm

Thanks for your input so far. 🙂
I think my best option is to check out the javascript files. Hopefully I can find an init function.

• JasperV

• May 13, 2019 at 10:44 pm

YES, finally made some progress!
I fixed the repeater’s add row button by running the following JS function after loading the fields:
window.acf.doAction('load')

Now I only need to fix the visual field 🙂

• JasperV

• May 14, 2019 at 6:36 pm

I debugged acf-input.json for a bit.

Inside ACF’s initializeQuicktags() default settings are retrieved like so:
`
var defaults = {
tinymce: tinyMCEPreInit.mceInit.acf_content,
quicktags: tinyMCEPreInit.qtInit.acf_content
};
`
I decided to console.log(tinyMCEPreInit) here and in my attachment are my results. On the left is my custom page, on the right a default ACF options page.

As you can see, my custom page is missing the acf_content field under mceInit.

acf_defaults....png

• JasperV

• July 17, 2019 at 12:21 am

`
window.tinyMCE.init({ selector:#${div.id} .wp-editor-area})
`