I have a little problem and need your help. I have tabs on my page and in one tab i have google maps. This tab is hidden by default and when i clik on it, i can see only small piece of maps. Map it is shortcode from one installed plugin. I found solution how to run ajax request (here) to load content after click and it looks like working right with simple html code, but when I try place php code with shortcode it doesn’t work. I think it is simple but my knowledge is too small to write working code :(

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#map').on('click',function() {
        var data = {
            action: 'process_shortcode_on_tab_click'
        $.post('/wp-admin/admin-ajax.php',data).done(function(response) {    
             $('#map-containter').html('<?php echo do_shortcode("[map_shortcode height='300']"); ?>');   

<div class="tabs">
<a class="tab active" href="#">Tab 1</a>
<a class="tab" href="#">Tab 2</a>
<a id="map" class="tab" href="#">Tab with map</a>   

And in my theme function i have this:

add_action( 'wp_ajax_process_shortcode_on_tab_click_action', 'process_shortcode_on_tab_click_ajax');
add_action( 'wp_ajax_nopriv_process_shortcode_on_tab_click_action', 'process_shortcode_on_tab_click_ajax');
function process_shortcode_on_tab_click_ajax() {
echo do_shortcode('[map_shortcode height="300"]');

Read more here: How can I run shortcode after click with ajax


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , ,

Wordpress related questions and answers: