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

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

user2949
1#
user2949 Published in April 24, 2018, 6:41 am

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

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO