Support

Account

Home Forums ACF PRO ACF in jQuery function

Solving

ACF in jQuery function

  • 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.

    Kay and values

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.