web-dev-qa-db-fra.com

Comment puis-je exécuter un shortcode après un clic avec ajax

J'ai un petit problème et j'ai besoin de votre aide. J'ai des onglets sur ma page et dans un onglet j'ai google maps. Cet onglet est masqué par défaut et lorsque je clique dessus, je ne peux voir qu'un petit morceau de carte. La carte est un shortcode d'un plugin installé. J'ai trouvé une solution comment exécuter une requête ajax ( here ) pour charger le contenu après un clic et il semble fonctionner correctement avec du code html simple, mais lorsque j'essaie de placer du code php avec un shortcode, il ne fonctionne pas. Je pense que c'est simple mais ma connaissance est trop petite pour écrire du code de travail :(

<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>   

Et dans ma fonction thème, j'ai ceci:

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"]');
die();
}
2
Artus2000

Vous devriez essayer de remplacer la partie jQuery suivante:

 action: 'process_shortcode_on_tab_click'

avec celui-ci:

 action: 'process_shortcode_on_tab_click_action'

pour correspondre à vos actions wp_ajax_process_shortcode_on_tab_click_action et wp_ajax_nopriv_process_shortcode_on_tab_click_action.

Vérifiez par exemple le Codex sur comment nommer le hook wp_ajax_$youraction personnalisé.

1
birgire