Title: Execute shortcode only on click
Last modified: February 10, 2022

---

# Execute shortcode only on click

 *  [guidohx](https://wordpress.org/support/users/guidohx/)
 * (@guidohx)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/execute-shortcode-only-on-click/)
 * Hi,
 * I’m looking into a way of filtering hikes on a map based on the length of the
   route. I have written a script to filter and made a shortcode to be able to use
   it. It works when i put it on a page and let the page load.
 * However, I want to make the website dynamic and add js to it to change the map
   when I click on a button. I managed to get ajax and js working and get a response
   but it just won’t execute the shortcode.
 *     ```
       function my_ajax_tabs_js_scripts() {
           wp_enqueue_script( 'my_ajax_filter_search', 'https://wandeltoppers.nl/wp-content/plugins/wandeltoppers_plugins/h_ajaxtabs.js');
           wp_localize_script( 'my_ajax_filter_search', 'ajaxurl', admin_url('admin-ajax.php') );
       }
   
       function my_ajax_tabs() {
       	my_ajax_tabs_js_scripts();
       }
       add_shortcode ('my_ajax_tabs', 'my_ajax_tabs');
   
       function my_tab_menu() {
          $shortcode = '[leaflet_to_show min_length="0" max_length="13"]';
       //	 $shortcode = '[leaflet-map]';
       	 wp_send_json_success($shortcode);
         }
   
       add_action('wp_ajax_my_tab_menu', 'my_tab_menu');
       add_action('wp_ajax_nopriv_my_tab_menu', 'my_tab_menu');
       ```
   
 * Js:
 *     ```
       jQuery(document).ready(function($) {
               $('.elementor-tabs-wrapper div').click(function(e) {
                   e.preventDefault();
   
                   var tab_id = $(this).attr('id'); 
       			section_id = tab_id.slice(-4);
       			console.log("js fired");
       			console.log(tab_id);
       			console.log(section_id);
                       var data = { 
       					action: 'my_tab_menu', 
       					id: section_id};
       				$.post(ajaxurl,data).done(function(response) {
       					console.log(response.data);
       					console.log("'#elementor-tab-content-'+section_id");
                           $('#elementor-tab-content-'+section_id).html(response.data);   
       				});
            }); 
        }); 
       ```
   
 * any thoughts?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fexecute-shortcode-only-on-click%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

The topic ‘Execute shortcode only on click’ is closed to new replies.

 * ![](https://ps.w.org/leaflet-map/assets/icon-256x256.png?rev=1693083)
 * [Leaflet Map](https://wordpress.org/plugins/leaflet-map/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/leaflet-map/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/leaflet-map/)
 * [Active Topics](https://wordpress.org/support/plugin/leaflet-map/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/leaflet-map/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/leaflet-map/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [guidohx](https://wordpress.org/support/users/guidohx/)
 * Last activity: [4 years, 3 months ago](https://wordpress.org/support/topic/execute-shortcode-only-on-click/)
 * Status: not resolved