Home Forums ACF PRO Get Jquery from Advanced Custom Fields value


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

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

    In case it is CPT:

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

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

    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.

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

                    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]) {
                            else if (cuepoint.time === onPlayergo.cuepoints[1]) {
                            else if (cuepoint.time === onPlayergo.cuepoints[2]) {
    ==== 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]);

    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)

              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.