Hello,
i have a wordpress website and iam using acf plugin. I would like to use the acf javascript api to interact with fields using javascript but i don’t have any idea how to use this api.
my plugin directory contains a js directory and other directories containing php files.
on the php files there is html form created with acf fields .
i have tried to use this code on the header of my php file to interact with acf fields but nothing work for me:
<script>
function Geeks() {
jQuery(document).ready(function($) {
var field = acf.getField(‘field_x25086bc0bde11e8ba096f6e6c696e65’);
field.$el.addClass(‘hidden’)
});
}
</script>
i would like to use a javascript file .js under js/ directory of my other pluging and call this js file on my php file using acf javascript api
please provide a guide to integrate this api for beginners
Thanks a lot
Bassem
+1 on this. I know my way inside out of PHP, but I’ve always found JavaSript a bit of a pain. It would be nice to have some guidance for a simple example in the Javascript ACF documentation.
What do we need to do to get the acf JS object? When I type acf on the console or reference it on my code I get
Uncaught ReferenceError: acf is not defined
ACF is only loaded on pages where there are ACF fields.
I cannot give a complete tutorial.
You need to enqueue your scripts on the acf/admin_enqueue_scripts or acf/enqueue_scripts
and you need to set the depends argument to array(‘acf-input’);
When building my JS it generally looks like this
(function($){
if (typeof('acf') == 'undefined') {
return;
}
// all my code here
})(jQuery);
Just wanted to also say that the documentation provided by the developer (not me) is targeted at what 95% of users would use. For the other 5% of us that go deeper than what most people will do, like building custom JS to alter the way fields work, we are really on our own and what we share, which is why I try to share what I can when I have time.
Thanks for the reply, @hube2 ! I have managed to use the ACF Javascript Library and I found it straightforward after a playing around for a bit.
Yes, that’s what I loved about these forums, the wealth of shared information of devs trying to solve a common problem! 🙂
Hi there everyone! I’m also experiencing a related issue whit this. I’m also somewhat a “newbie” to these regards so maybe I’m missing something. I’d be glad if you pointed me that out.
I’m currently working with WP via Oxygen and I’m still not able to pull the JavaScript API in the individual elements JavaScript panel. I understand that ACF and Oxygen has in built integration. So far regarding simple Text and files custom fields placed in a random heading it’s working perfectly.
However, when I Try to use some JavaScript API commands it just doesn’t work.
I’ve seen that none of the .js files (i.e:”acf-input.min.js”) are actually loaded to the final page. So, I tried manually to enqueue them via a Custom Functionality plugin to oxygen (Following: This Tutorial). Now they appear correctly included in the page’s head tags, but still doesn’t allow me to use any of the API.
Please, What’s the appropriate way to enqueue the libraries so they work properly in oxygen?
Maybe is there a native way to do this from wp_admin side?
Thanks in advance! 😀
AG
