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
The topic ‘Get Jquery from Advanced Custom Fields value’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.