Support

Account

Home Forums ACF PRO Get Jquery from Advanced Custom Fields value

Solving

Get Jquery from Advanced Custom Fields value

  • I have advanced custom fields that store values that I need to use in a jquery script. I have a simple jquery script that i want to execute on a page.
    I am aware that I can enqueue this script, I’m fully aware of how to do that.

    What I want to accomplish:
    When the page loads and executes the script, I want it to get certain values “vars” and function name from a custom field for that post obviously before the script is executed on the page. Is this possible ACF?

    Alternative method:
    If I dont enqueue the script, BUT add it directly into my template file, can I get the values from custom fields into the script that way?

    Alternative Method 2:
    If I use php in my template in the head to get and set the value for the script’s vars / function, can I get the values from custom fields this way using ACF?

  • In case it is option page

    <script>
    var testVar = "<?=get_field('field_name','option'); ?>";
    </script>

    In case it is CPT:

    <script>
    var testVar = "<?=get_field('field_name',$post_id); ?>";
    </script>

    So, now you can use testVar in your jQuery after loading page

    Trick:
    store php & MySql value in hidden inputs with known id and then get this input value by its id in your jQUery code

  • To add to what @echocode posted, I would localize the script with the values that are needed rather than include a script tag. The only real difference here is that the script tag is output directly before the script is included. https://codex.wordpress.org/Function_Reference/wp_localize_script

  • Yea, I’m aware of both method you have mentioned. But for 2 reasons they wont work for me. The first and major one is that I’m not fluent at all with writing js.. and second, this small piece of js is for a video player (for which I have a few hundred videos).. each video has different “cue points”, amongst a few other things that would make each run of this js unique just for that player / instance of js.

    Here is the js:

    <script>
                    window.onload = function () {
                        var onPlayergo = {
                            cuepoints: [10, 26, 43, 65],
                            qualities: ["240p", "360p", "480p", "720p", "1080p"],
                            defaultQuality: "360p",
                            sources: [
                            { type: "video/mp4",    src: "/v-assets/video/test.mp4" }               
                             
                             ]                           
                             },                     
                             
                        container = document.getElementById("player");
                        sidecarLeft = document.getElementById("sidecar-left");
                        sidecarRight = document.getElementById("sidecar-right");
                        msgOne = document.getElementById("msg-01");
                        msgTwo = document.getElementById("msg-02");
     
                        Player(container, {
                            clip: onPlayergo,
                            autoplay: false
                        }).on("cuepoint", function (e, api, cuepoint) {
                            if (cuepoint.time === onPlayergo.cuepoints[0]) {
                                jQuery(sidecarLeft).removeClass('sidecar-left-one').addClass('sidecar-left-two');
                                jQuery(sidecarRight).removeClass('sidecar-right-one').addClass('sidecar-right-two');                        
                            }
                            else if (cuepoint.time === onPlayergo.cuepoints[1]) {
                                jQuery(sidecarLeft).removeClass('sidecar-left-two').addClass('sidecar-left-three');
                                jQuery(sidecarRight).removeClass('sidecar-right-two').addClass('sidecar-right-three');
                            }               
                            else if (cuepoint.time === onPlayergo.cuepoints[2]) {
                                jQuery(sidecarLeft).removeClass('sidecar-left-three').addClass('sidecar-left-four');
                                jQuery(sidecarRight).removeClass('sidecar-right-three').addClass('sidecar-right-four');
                            }
                             
    ==== REMOVED ====
                         
                        }).on("beforeseek", function (e, api, pos) {
                            onPlayergo.cuepoints.forEach(function (cue) {
                                if (pos > cue) {
                                    if (!isNaN(cue)) {
                                      cue = {time: cue};
                                    }
                                    api.trigger("cuepoint", [api, cue]);
                                }
                            });
                        });
                    };
                </script>
    

    Ideally, I would like to put this code into a template file I have for this “player custom post type”.

    Above are hard coded cue points like:

    
    cuepoints: [10, 26, 43, 65],
    

    Now what I would like to do is have something like this:

    
    cuepoints: [custom_field_cue_one, custom_field_cue_two, custom_field_cue_three],
    

    So your methods above could work IF, I knew how to code js well enough. Thus the reason why I am asking for this less elegant method.

  • To do this simply, you would use the code you have and do what @echocode suggested, substituting field calls, for example (just using the first bit of your code)

    
    <script>
              window.onload = function () {
                        var onPlayergo = {
                            cuepoints: [
                              <?php the_field('custom_field_cue_one'); ?>,
                              <?php the_field('custom_field_cue_two'); ?>, 
                              <?php the_field('custom_field_cue_three'); ?>, 
                              <?php the_field('custom_field_cue_four'); ?>
                            ],
    // etc.....
    
  • Yea, but the problem is, for example, just for cues.. there are 100’s of videos.. the cue point(s) vary.. For one video may have 2 cue points while another may have 20..

    Using your code above, if that video had 1 cue point.. then since there is no cue three.. that would leave numerous commas since the remaining fields are null, nothing would output… leaving commas behind

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

The topic ‘Get Jquery from Advanced Custom Fields value’ is closed to new replies.