How execute shortcode with javascript

admin管理员组

文章数量:1125096

Suppose to have this shortcode:

[spu-close class="" text="" align=""]

I want to show this short code when I click on a button this is my html:

 <input class="button b" onclick="openFile(link);"  type="button" value="download" />

and this is my js file:

function openFile(link){
//I want do something like this
    do_shortcode('[spu-close class="" text="" align=""]', false );
   //  

}

I don't know how I can do this, anyone can help me?

Suppose to have this shortcode:

[spu-close class="" text="" align=""]

I want to show this short code when I click on a button this is my html:

 <input class="button b" onclick="openFile(link);"  type="button" value="download" />

and this is my js file:

function openFile(link){
//I want do something like this
    do_shortcode('[spu-close class="" text="" align=""]', false );
   //  

}

I don't know how I can do this, anyone can help me?

• shortcode
• javascript
• html

Share Improve this question asked Oct 2, 2017 at 14:15 DoppyDoppy 4111 gold badge11 silver badge33 bronze badges 1

• 1 Not sure if this is even possibile as a shortcode is made up in PHP, and PHP is serverside. And Javascript is client side. You should be able to run this function in PHP tho. – Menno van der Krift Commented Oct 2, 2017 at 14:19

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

to execute "ShortCode" which server side-> wordpress ->php ,by JavaScript which client side you will need use AJAX!

you can use some thing like:

1-in your enqueued .js file :

jQuery(document).ready(function($) {
    $('.buttonClass').on('click', function() {
        $.ajax({
            url: Param.doShortCode,
            type: 'POST',
            data: {
                action: 'handle_ajax_shortcode',
            },
            success: function() {
                //do something on success 
            },
            error: function() {
                //do something on error
            }
        })
    })
});

2- in php file :

//localize your script
$Param = array(

  'doShortCode'=>admin_url( 'admin-ajax.php' ),
      
);
wp_localize_script('handle_ajax_shortcode','Param', $Param);

//executes for users that are not logged in.
add_action( 'wp_ajax_nopriv_handle_ajax_shortcode', 'handle_ajax_shortcode' );
//executes for users that are logged in.
add_action( 'wp_ajax_handle_ajax_shortcode', 'handle_ajax_shortcode' );


function handle_ajax_shortcode(){
  //put whatever you want to be execute when JavaScript event is triggered
  do_shortcode( string $content, bool $ignore_html = false )
  // Don't forget to stop execution afterward.
  wp_die();

}

for more information you can check Link1 & Link2 & Link3

本文标签： How execute shortcode with javascript