Home Ajax Tabs for Wordpress that loads and runs different shortcodes when user changes the tab
Reply: 2

Ajax Tabs for Wordpress that loads and runs different shortcodes when user changes the tab

ranka
1#
ranka Published in 2018-01-13 12:10:27Z

How does one execute a shortcode, which is placed in a tab, only when the user clicks on the Tab's Title. How do we do this for five tabs? MY objective is to reduce load time of me website. So, only that content which the user wants must load when he clicks on the tab.

I'm fairly certain the best way to do this is by utilizing Wordpress's admin-ajax.php. I've searched a great deal. And I've found most of the code (I think) to create the AJAX tabs. But, when I fire the code it doesn't show up. Rather the HTML shows us, the AJAX doesn't.

$(document).ready(function() {
  $('.my_tabs a').click(function(e) {
    e.preventDefault();

    var tab_id = $('this').attr('id');


    $.ajax({
      type: "POST",
      url: "wp-admin/admin-ajax.php",
      dataType: 'html',
      data: ({
        action: 'my_tab_menu',
        id: tab_id
      }),
      success: function(data) {
        $('#my_tab' + tab_id).html(data);
      },
      error: function(data) {
        alert("Error!");
        return false;
      }

    });

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_tabs">
  <a href="#my_tab1" id="my_tab_id_1">Tab 1</a>
  <a href="#my_tab2" id="my_tab_id_2">Tab 2</a>
  <a href="#my_tab3" id="my_tab_id_3">Tab 3</a>
  <a href="#my_tab4" id="my_tab_id_4">Tab 4</a>
  <a href="#my_tab5" id="my_tab_id_5">Tab 5</a>
</div>

<div class="my_section" id="my_tab1">
  <?php echo do_shortcode ('[shortcode-1]'); ?>
</div>

<div class="my_section" id="my_tab2">
  <?php echo do_shortcode ('[shortcode-2]'); ?>
</div>

<div class="my_section" id="my_tab3">
  <?php echo do_shortcode ('[shortcode-3]'); ?>
</div>

<div class="my_section" id="my_tab4">
  <?php echo do_shortcode ('[shortcode-4]'); ?>
</div>

<div class="my_section" id="my_tab5">
  <?php echo do_shortcode ('[shortcode-5]'); ?>
</div>

I add all the code directly into the page using a page-builder. So, I'm not using functions.php to add_action for this particular tab that I'm trying to implement.

I found all the code from a similar post on stackover: Ajax tabs (wordpress)

They call template_parts into the tabs. Where as I want to execute a shortcode.

I'm what you'd call a coding bimbo. All help shall be much appreciated.

Thank you. And if you've managed to read till here, you deserve to have a pleasant day. :D

MD. Atiqur Rahman
2#
MD. Atiqur Rahman Reply to 2018-01-19 14:59:34Z

Okay, so you can't achieve it the way you have laid your template. As soon as you echo the shortcode and the browser renders the page, the shortcode contents must have printed. You need to create a custom-page-template.php, create a page and on that page you need to send the shortcode handler as soon as you click on the tab through GET or POST method using ajax.

In your Custom Template you receive the [shortcode-1]. An example code would be like you see below:

<?php
/*
Template Name: Shortcode Processor
*/
$current_shortcode = $_POST['shortcode_name'];
?>
<div id="shortcode-contents">
<?php echo do_shortcode($current_shortcode); ?>
</div>

Now you have the response in your Ajax Call. You can now inject the success html inside your desired tab.

varzesht
3#
varzesht Reply to 2018-01-13 13:37:36Z

Try

         <button class="tabs" id="my-tabid1" data-target=".my-section1.box">Tab 1</button>
         <button class="tabs" id="my-tabid2"  data-target=".my-section2.box">Tab 2</button>
         <button class="tabs" id="my-tabid3" data-target=".my-section3.box">Tab 3</button>


        <div class="my_section1 box active" id="my-tab1">
           <?php echo do_shortcode ('[shortcode-1]'); ?>
        </div>

        <div class="my-section2 box" id="my-tab2">
          <?php echo do_shortcode ('[shortcode-1]'); ?>
        </div>

        <div class="my-section3 box" id="my_tab3">
           <?php echo do_shortcode ('[shortcode-1]'); ?>
        </div>
<style>
.box {
  display: none;
}
.box.active {
  display: block;
}
</style>
        <script>
        $('.tabs').on('click', function(){
          var $target = $($(this).data('target'));
          $target.siblings().removeClass('active');
          $target.addClass('active');
        });
    </script>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.311483 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO