Hi, I have a jquery function where I want to display the acf field values:’model’. Looks like this:
function action_wc_before_single_variation() {
?>
<script type="text/javascript">
(function($){
$('form.variations_form').on('show_variation', function(event, data){
console.log( data.variation_id ); // The variation Id
console.log( data.variation_description ); // The variation description
var field = acf.get('model');
console.log( $field );
});
})(jQuery);
</script>
<?php
An error is displayed: acf not defined
How do I show it in jQuery
The ACF JS files (API) are only loaded on the admin and will only work for editing. The ACF JS does not run on the front end and cannot be used to get values of fields.
If I am somehow misunderstanding where you are attempting to use this you need to use acf.getField() and this function requires a field key, not field name.
https://www.advancedcustomfields.com/resources/javascript-api/#acf.field
so, i have fields in the products i want to show on the site.
The problem is that I have to use jQurry because of the dynamic display.
I tried to test in the console like this first, but I can’t get the values
function action_wc_before_single_variation() {
?>
<script type="text/javascript">
(function($){
$('form.variations_form').on('show_variation', function(event, data){
console.log( data.variation_id ); // The variation Id <=== <===
console.log( data.variation_description ); // The variation description <=== <===
var field = acf.getField('fork_model');
console.log( $field );
});
})(jQuery);
</script>
<?php
}
Am I wrong somewhere?
As I said, the ACF JS API cannot be used for displaying data. The input field must be on the page, which it is not on the front of the site unless this is an ACF form.
I don’t know how else to explain this. ACF JS functions are for making changes in the admin or when editing content, not for displaying content.
Where you are doing this var field = acf.getField('fork_model'); you need to make an AJAX request to the server to get the data.
