[Resolved] Get Jquery from Advanced Custom Fields value

[Author]

Posts

[nicoleL]

I have advanced custom fields that store values. 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. Is this possible with wp-types and views?

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 wp-types and views?

[Christian Cox]

In theory you could use your template to output hidden input fields that include the value of each custom field you want to use, then use jQuery to access the values in those fields.

<input type="hidden" id="field-slug-1" value="[wpv-post-field name='wpcf-field-slug-1']" />

var doSomething = function( value ) {
  alert( value );
}

jQuery(document).ready(function(){
  var field1 = jQuery('#field-slug-1').val();
  doSomething( field1 );
});

[nicoleL]

@Christian, first thanks for the prompt response.
I see you gave me a snippet that assumes form input, which is fine, I get the point. I'm using this to supply vals to js for a video player. I 'think' this method you supplied MAY get a bit hairy for me because the js I'm using is just a bit different for every single video. For example, each video (which there are hundreds), I have cue points that get put into the js. Like so

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

I need to get custom fields to js values (from code above): cuepoints, qualities, etc.
And also get custom fields for css values (from code above): removeClass('sidecar-left-one').addClass('sidecar-left-two')

I think what may help me to wrap my head around not only the solution but 'how' and 'when' the js vars is read from WP during the page render would help also. Meaning, I'm assuming that when the page is loaded, what gets read first?

values are read from custom fields, page head scripts are loaded, html and inline js is rendered, footer js is rendered.

Is that the correct order?

[nicoleL]

Is there anyone else that can help with this?

[Christian Cox]

Meaning, I'm assuming that when the page is loaded, what gets read first?
Generally speaking, the browser starts at the top of the file and reads down. There are exceptions, like code invoked via AJAX or script, and event handlers like jQuery's document.ready. So in general:
- Header scripts
- Body scripts in source order
- Document.ready handlers are triggered in the order in which they were registered
If you insert custom field values into the body content using shortcodes, then those values will be available to JavaScript the moment they are included in the HTML body, executed in source order. Use console.log to test this if you'd like to watch code execution in the browser console.

[nicoleL]

Hmmm.. which leads me to believe that I could create a custom field with js in it.. but then leaves the question how would I get the values that are also in custom fields?

[Christian Cox]

What if you create a config object using the custom field values, then use those values later in your callbacks:

<script>
var playerConfig = {
 cuepoints: [10, 26, 43, 65],
 qualities: ["240p", "360p", "480p", "720p", "1080p"],
};
</script>

...

...
                window.onload = function () {
                    var onPlayergo = {
                        cuepoints: playerConfig.cuepoints,
                        qualities: playerConfig.qualities,
...

[nicoleL]

Ok, so say I'm creating a view. Can in go to the js area, enter the js like this?

window.onload = function () {
                    var onPlayergo = {
                        cuepoints:  [  [types field="cuepoints" seperator=", "][/types]  ],

Will this pull the values from my custom field?

[Christian Cox]

No, the JS panel of a View or Content Template is rendered as static code. Shortcodes are not interpreted like this. We generally do not recommend adding JavaScript directly to post contents, Content Templates, Layouts or View loops. The best recommendation is to use hidden fields to store values, then grab those values with static JavaScript in the JS panel or a separate, enqueued JavaScript file.

[nicoleL]

Ok, so I literally just stumbled upon something that may work while reading the docs.
(side note, is it weird if a person actually likes to read documentation? I can read "well written" documentation as if it were a good novel!)

Anyways.. Christian I stumbled on the fact that <script> tags can be used directly in content templates and views templates editor field!
Seeing as my piece of script is pretty basic, if I put it right with the html in the content template editor... (million dollar question) In theory, can I simply use a view shortcode like [wpv-post-field name="cuepoint-01"]

Referencing the code above:

<script>
var playerConfig = {
 cuepoints: [10, [wpv-post-field name="cuepoint-01"], 43, 65],
 qualities: ["240p", "360p", "480p", "720p", "1080p"],
};
</script>

Will the above use of wpv shortcode supply that custom field value to the script?
Lastly, would there be a problem with the use of the brackets [ ], seeing as there are brackets used in the script and brackets are used for shortcodes?

[Christian Cox]

I cannot suggest or recommend using script tags in a Content Template or View Output, and I cannot recommend using shortcodes in script tags in a Content Template or View Output. If you want to experiment beyond the recommended usage of Toolset, that's fine, but this kind of customization is not officially supported here in the forums. The best place to add JavaScript is in the JS panel editor as described here: https://toolset.com/documentation/user-guides/adding-custom-javascript-views/