Wordpress - Adding shortcode via in JS but it doesn't render

Question

I have an issue whereby I am trying to change the HTML content of a defined canvas depending on a user's selection from a "select" field/ pulldown menu.

<select id="menu-selection">
   <option class="menuOption">Main Menu</option>
   <option class="menuOption">Lunch Menu</option>
   <option class="menuOption">Sandwich Menu</option>
   <option class="menuOption">Children's Menu</option>
   <option class="menuOption">Vegan Menu</option>
   <option class="menuOption">Gluten-Free Menu</option>
   <option class="menuOption">Dessert Menu</option>
   <option class="menuOption">Afternoon Tea</option>
   <option class="menuOption">Party Buffet Menu</option>
   <option class="menuOption">Party Set Menu</option>
   <option class="menuOption">Coffee Menu</option>
   <option class="menuOption">Cocktail Menu</option>
   <option class="menuOption">Milkshakes</option>
   <option class="menuOption">Wine Menu</option>
</select>

<div id="menu-canvas">
    [elementor-template id="218"]
</div>

I am doing this by using a JS switch statement, so that with each case, the canvas content is changed to the corresponding template shortcode via ".innerHTML" method in JS.

<script>    
sel = document.getElementById("menu-selection");
    canvasChoice = document.getElementById("menu-canvas");
    
    
    sel.addEventListener('change', function(){
       idx = sel.selectedIndex;
       // Log for debugging
    //   console.log(idx);
    
       switch(idx){
       case 0: canvasChoice.innerHTML = '[elementor-template id="218"]'; break;
       case 1: canvasChoice.innerHTML = '[elementor-template id="226"]'; break;
       case 2: canvasChoice.innerHTML = '[elementor-template id="229"]'; break;
       case 3: canvasChoice.innerHTML = '[elementor-template id="232"]'; break;
       case 4: canvasChoice.innerHTML = '[elementor-template id="319"]'; break;
       case 5: canvasChoice.innerHTML = '[elementor-template id="349"]'; break;
       case 6: canvasChoice.innerHTML = '[elementor-template id="235"]'; break;
       case 7: canvasChoice.innerHTML = '[elementor-template id="311"]'; break;
       case 8: canvasChoice.innerHTML = '[elementor-template id="314"]'; break;
       case 9: canvasChoice.innerHTML = '[elementor-template id="323"]'; break;
       case 10: canvasChoice.innerHTML = '[elementor-template id="238"]'; break;
       case 11: canvasChoice.innerHTML = '[elementor-template id="242"]'; break;
       case 12: canvasChoice.innerHTML = '[elementor-template id="850"]'; break;
       case 13: canvasChoice.innerHTML = '[elementor-template id="926"]'; break;
       default: break;
    }
    });
</script>

The content changes correctly, but the shortcode doesn't actually produce the template as it should, instead it just renders as text.

I have tried do_shortcode with PHP but that didn't work.

Any suggestions?

Answer 1

Shortcode only work serverside via wordpress in a `do_shortcode()' method. There for javascript directly wont work. But using ajax you can asynchronously add php files to the page without needing to refresh it. Here is a good reference to learn more about it.

https://premium.wpmudev.org/blog/using-ajax-with-wordpress/