Situation
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.
Problem
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.
