php - 使用 Ajax 更改 WordPress 页面上的简码 ID

Question

我在 WordPress 中有一个自定义 PHP 页面，需要显示连接到地图插件简码的按钮。每个按钮都需要更改页面上显示的地图。Ajax 操作正在运行，但仅显示地图的 ID，而不是完整的简码。

我在 StackOverflow 上找到了一个类似的帖子，对 Contact Form 7 短代码做了类似的事情。

使用的Javascript：

<script type="text/javascript">
            $(function () {
                var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
                $('.button-map').click(function () {
                    $.ajax({
                        url: ajaxurl, //global variable provided by WP
                        type: 'GET',
                        data: {
                            'action': 'get_map_frame',
                            'map_id': $(this).data('id')
                        },
                        success: function (data) {
                            $('#map_area').html(data);
                        }
                    });
                });
            });
        </script>

functions.php 中的 Ajax 调用：

add_action('wp_ajax_get_map_frame', 'get_map_frame');
add_action('wp_ajax_nopriv_get_map_frame', 'get_map_frame' );
function get_map_frame() {
    if (isset($_GET['map_id'])) {
        $map_id = (int) $_GET['map_id'];
        echo do_shortcode('[cspm_main_map id="' . $map_id . '"]');
    }
    exit();
}

页面代码 HTML：

<div class="w-col w-col-12">
<div class="column-29 w-col w-col-3">
<div><a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5425">Dining and Drinks</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5695">Entertainment and Transportation</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5697">Shopping</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5698">Pets and Parks</a>
</div>
</div>
<div id="map_area"></div>
</div>

我想要实现的是每个按钮都会拉出与地图 ID 关联的单独地图。当前，当单击该按钮时，它仅返回页面上的实际地图 ID，而不返回用于显示预期地图的其余短代码。

http://aopmap.villagegreenmarketingservices.com/test123/

标签： phpajaxwordpressshortcode