trying to populate a "shortcode" value in wordpress with javascript

Question

as stated, I am trying to dynamically populate a [shortcode] value in WordPress so that it puts the appropriate value in the field before it dumps the shortcode and all of the scripting happens in the plugin that outputs the complex code.

as of right now, I am able to properly output the value i want as seen here:

var url = window.location.href;
    url = url.split('#').pop().split('?').pop().split('docsid=').pop();
    var page = url.substring(url.lastIndexOf('/') + 1);
    var docsid = ('"' + page + '"')
   
console.log(docsid);```

This works as expected, my problem is, i'm trying to populate this field:

document.write(real3dflipbook id=docsid);

based on the code that the shortcode is dumped to, it looks like the shortcode is running first, then attempting to run my inputted javascript.

I have to console.logs running; one within the page itself, another in the embed.js file

the embed.js file console.log is working as it should be and that is the value output i'm hoping to get from my code.

1_633dbda152374                                                     embed.js:144:16

the documents console.log is kicking up an error that it is producing from the embed.js file whenever i try to document.write(real3dflipbook id=docsid)

Uncaught SyntaxError: expected expression, got '<'                 documents:607:15

The code from the embed.js that I believe is where it is getting hung up is here:

var containerClass = bookContainer.attr("class")
    var containerId = bookContainer.attr("id")
    bookContainer.removeClass(containerClass).addClass(containerClass + "-" + containerId)>

console.log(containerId);

here is what the output code ends up looking like in the final page:

don't have enough points to embed yet

the top bit of highlighted garbage in the image is what happens when i attempt to document.write();

the bottom bit highlighted in blue is what SHOULD happen if it were properly updating the shortcode.

Any ideas or solutions on this? any help would be greatly appreciated!!

PHP (as executed by your shortcode) runs server-side, javascript is client-side, so PHP will *always* run before javascript. Unless you use AJAX - which is like using javascript to run more PHP code on the server side - but that doesn't work with shortcodes — FluffyKitten, Oct 05 '22 at 18:04

score 1 · Answer 1 · answered Oct 05 '22 at 18:08

You can not just insert a shortcode parameter via javascript. The shortcode is rendered by the backend on page load. To dynamically set shortcode params you would need to make an AJAX call to a custom function in the backend which returns your shortcode with the specified parameters.

More information on Wordpress AJAX can be found here https://codex.wordpress.org/AJAX_in_Plugins

trying to populate a "shortcode" value in wordpress with javascript

1 Answers1