Question

我想在选项卡中动态调用不同的模板。我被困在这一部分，如果有人可以帮助我，我会非常满满的。我做了一个模板的调用，但动态调用对我来说很难，因为我是ajax的新手。感谢

<ul class="nav nav-tabs" id="ajax-tab">
        <li class="sectionA"><a href="#sectionA" data-type="test">Section A</a></li>
        <li><a href="#sectionB" class="section-b" data-type="test2">Section B</a></li>
    </ul>
    <div class="tab-content">
        <div id="sectionA" class="tab-pane fade in active">
        </div>
        <div id="sectionB" class="tab-pane fade">

        </div>
    </div>

    $('.sectionA a').click(function () {
        var clickedId = $(this).attr('href'),
            $this = $(clickedId);

        $.ajax({
            type: "POST",
            url: 'http://acethehimalaya.dev/wp-admin/admin-ajax.php',
            data: {
                action: 'my_ajax_action',
                post_id: <?php echo $postid; ?>
            },
            cache: true,
            beforeSend: function () {
                $this.empty();
                $this.addClass('loading');
            },
            complete: function () {
                $this.removeClass('loading');
            },
            success: function (data) {
                $this.append(data);
            },
            error: function (MLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

    });


function my_ajax_action(){
if ($test == '#sectionA') {
    include(locate_template('test2.php'));
}else{
       //call another template }die();}

Answer 1

get_header();
$postid = get_the_ID();?>
<div class="bs-example">
    <ul class="nav nav-tabs" id="ajax-tab">
        <li><a href="#sectionA">Section A</a></li>
        <li><a href="#sectionB" class="section-b">Section B</a></li>
    </ul>
    <div class="tab-content">
        <div  id="sectionA" class="tab-pane fade in active">
        </div>
        <div id="sectionB" class="tab-pane fade">

        </div>
    </div>
</div>
<script>


    $('#ajax-tab a').click(function () {
        var clickedId = $(this).attr('href'),
            $this = $(clickedId);
        console.log(clickedId);

        $.ajax({
            type: "POST",
            url: 'http://acethehimalaya.dev/wp-admin/admin-ajax.php',
            data: {
                action: 'my_ajax_action',
                post_id: <?php echo $postid; ?>,
                name: clickedId
            },
            cache: true,
            beforeSend: function () {
                $this.empty();
                $this.addClass('loading');
            },
            complete: function () {
                $this.removeClass('loading');
            },
            success: function (data) {
                $this.append(data);
            },
            error: function (MLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

    });
</script>

function my_ajax_action(){
$test = $_POST['name'];
$sectiona = '#sectionA';
if ($test == $sectiona) {
    include(get_template_directory() . '/test2.php');
} else {
    include(get_template_directory() . '/test.php');
}
die();}add_action('wp_ajax_nopriv_my_ajax_action', 'my_ajax_action');add_action('wp_ajax_my_ajax_action', 'my_ajax_action');

Ajax在不同的标签点击中动态调用不同的wordpress模板

1 个答案: