Ajax dynamically call different wordpress template in different tab click

1 Views

I want to dynamically call different template in the tab. I am stuck in this part, if someone can help me it I will be very great full. I did the calling of a single template but dynamically calling is being hard to me as I am new in ajax.
Thanks 

<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();}
Post Views: 1

Related posts

1 comment 

  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');

Comments are closed.