php - Ajax tabs (wordpress) -


so, new @ ajax , after reading online tutorial, below have understood. please correct me if wrong.

current situation:

  1. tab_menu.php : has tabs tab 1 tab default shows on page load. tab 2 tab, menu_tab2.php content shown on page load.

     <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">     tab 1 content              </div>  <div class="my_section" id="my_tab2">    <?php get_template_part('page/menu_tab2'); ?>              </div>  <div class="my_section" id="my_tab3">    <?php get_template_part('page/menu_tab3'); ?>              </div>  <div class="my_section" id="my_tab4">    <?php get_template_part('page/menu_tab4'); ?>              </div>  <div class="my_section" id="my_tab5">    <?php get_template_part('page/menu_tab5'); ?>              </div> 
  2. menu_tab2.php (and similar contents rest of tabs)

     <div class="my_section" id="menu_tab2_content_id">    tab 2 content             </div> 

so, want load tab php files content corresponding tabs using ajax.

here have far (execute php function when clicked (wordpress))

jquery

    $(document).ready(function() {         $('.my_tabs a').click(function(e) {             e.preventdefault();              var tab_id = $('this').attr('id');                $.ajax({                 type: "get",                 url: "wp-admin/admin-ajax.php",                  datatype: 'html',                 data: ({ action: 'my_tab_menu', id: tab_id}),                 success: function(data){                       $('#div'+tab_id).html(data);             },             error: function(data)               {               alert("error!");             return false;             }                });        });   });  

function.php

 function my_tab_menu() {    <?php get_template_part('page/tab1'); ?>    }  add_action('wp_ajax_my_tab_menu', 'my_tab_menu'); add_action('wp_ajax_nopriv_my_tab_menu', 'my_tab_menu'); 

problem:

how can target individual tab , corresponding php files?

thanks!

edit 1

so based on answer provided, here updated version:

function.php

 function my_tab_menu() {    $template_part_path = 'page/tab' . $_get['id'];   <?php get_template_part($template_part_path); ?>     }  add_action('wp_ajax_my_tab_menu', 'my_tab_menu'); add_action('wp_ajax_nopriv_my_tab_menu', 'my_tab_menu'); 

also, $('#div'+tab_id).html(data); correct? not understanding structure , each component means.

retrieve posted id $_get['id'] , add path.

$template_part_path = 'page/tab' . $_get['id']; <?php get_template_part($template_part_path); ?>  

Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

jquery - javascript onscroll fade same class but with different div -