I want to display a php code shortcode in JavaScript, how do I do that?-CodePudding

This is my code enter image description here

<script>
    let myDiv = document.createElement("div");
    myDiv.classList.add('test');
    let my_var = `<?php echo do_shortcode("[elementor-template id="5078"]"); ?>`;
    myDiv.innerHTML = my_var;
    document.querySelector("#instagram").appendChild(myDiv);
</script>

CodePudding user response：

Actually, it is not possible to do it this way because the script is being fired on the client-side while the PHP interpreter is working on the server-side. If you are sure that you need to use JS to render some PHP code, I'd suggest sending a request using wp_ajax https://codex.wordpress.org/AJAX_in_Plugins to send a request on a server, and then the server can return any PHP code result that you want. Don't forget that shortcodes may use additional assets that will not be sent as a response.

The best way is to use shortcodes in a native form inside the content or PHP templates. Especially the elementor template where you can create template parts for different places of the website easily.

CodePudding user response：

It's an enclosure problem:
You used nested double quotes in your php – resulting in breaking the echo.

Provided, your <script> tag is in your template php (so your php shortcode could be parsed) try this (replace the shortcode double quotes by single quotes):

<script>
    let myDiv = document.createElement("div");
    myDiv.classList.add('test');
    let my_var = `<?php echo do_shortcode("[elementor-template id='5078']"); ?>`;
    myDiv.innerHTML = my_var;
    document.querySelector("#instagram").appendChild(myDiv);
</script>