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"]');
  • first check by alert..what you have got in response then put it in your html instead of shortcode.. – Priya jain Jul 7 '14 at 8:55
  • @Priyajain Yes, you are right. You have to check alert(); first. And please check this execute-a-shortcode-when-clicking-on-a-image. If not, find me in any social network by looking yeshansachithak. – yeshansachithak Jul 7 '14 at 9:30
  • After answer from @birgire ajax start working but still is something wrong. Alert displays message "Undefined". After click on the tab, ajax load script from shortcode but this script created empty div="map-canvas". Normally in this div was the map content. Any suggestion? – Artus2000 Jul 7 '14 at 14:55

You should try to replace the following jQuery part:

 action: 'process_shortcode_on_tab_click'

with this one:

 action: 'process_shortcode_on_tab_click_action'

to match your wp_ajax_process_shortcode_on_tab_click_action and wp_ajax_nopriv_process_shortcode_on_tab_click_action actions.

Check for example the Codex on how to name the custom wp_ajax_$youraction hook.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.