So, I am very new at Ajax and after reading some online tutorial, below is what I have understood. Please correct me if I am wrong.
Current Situation:
Tab_menu.php : Has tabs which Tab 1
tab is by default shows on the page load. For the Tab 2
tab, menu_tab2.php
content is shown on the 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>
menu_tab2.php (and similar contents for the rest of the tabs)
<div class="my_section" id="menu_tab2_content_id">
Tab 2 content
</div>
So, I want to load the tab php files content into the corresponding tabs using ajax.
Here is what I have so far (Execute php function only 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 I target the individual tab and corresponding php files?
Thanks!
EDIT 1
So based on the answer provided, here is the 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, is $('#div'+tab_id).html(data);
correct? I am not understanding the structure and what each component means.
Retrieve the posted ID from $_GET['id'] and add it to the path.
$template_part_path = 'page/tab' . $_GET['id'];
<?php get_template_part($template_part_path); ?>