I am working on a WordPress project where I have a set of modules that should load dynamically when clicking on module buttons. However, the modules are not loading as expected. Below is the relevant code:
single-coure.php
<div class='course_wrap container_wrap container_wrap_first main_color sidebar_left'>
<div class='container'>
<main id="course-content" class='template-page template-course content <?php avia_layout_class('content'); ?> units' <?php avia_markup_helper(array('context' => 'content', 'post_type' => 'course')); ?>>
<div id="module-content-wrap">
<?php
if (have_posts()) {
while (have_posts()) {
the_post();
the_content();
}
}
// Fetch related modules
$course_id = get_the_ID();
// Query to get modules related to the course
$args = array(
'post_type' => 'module',
'meta_query' => array(
array(
'key' => 'module_course',
'value' => $course_id,
'compare' => '='
)
),
'posts_per_page' => -1
);
$course_modules = new WP_Query($args);
// Initialize array to hold modules by type
$modules = array(
'Course Overview' => array(),
'Welcome' => array(),
'Course Video' => array(),
'Quiz Questions' => array(),
'Next Steps' => array()
);
// Loop through modules and categorize them
if ($course_modules->have_posts()) {
while ($course_modules->have_posts()) {
$course_modules->the_post();
$module_id = get_the_ID();
// Get module type, title, and content
$module_types = maybe_unserialize(get_post_meta($module_id, '_module_types', true));
$module_title = get_post_meta($module_id, 'module_title', true); // Fetch the specific module section title
$module_content = get_post_meta($module_id, 'module_content', true); // Fetch the specific module section content
// Fallback to default content types
$course_overview_content = get_post_meta($module_id, 'course_overview_content', true);
$welcome_content = get_post_meta($module_id, 'welcome_content', true);
$course_video_content = get_post_meta($module_id, 'course_video_content', true);
$quiz_questions_content = get_post_meta($module_id, 'quiz_questions_content', true);
$next_steps_content = get_post_meta($module_id, 'next_steps_content', true);
// Use specific content based on module type
if (empty($module_content)) {
if (!empty($course_overview_content)) {
$module_content = apply_filters('the_content', $course_overview_content);
} elseif (!empty($welcome_content)) {
$module_content = apply_filters('the_content', $welcome_content);
} elseif (!empty($course_video_content)) {
$module_content = apply_filters('the_content', $course_video_content);
} elseif (!empty($quiz_questions_content)) {
$module_content = apply_filters('the_content', $quiz_questions_content);
} elseif (!empty($next_steps_content)) {
$module_content = apply_filters('the_content', $next_steps_content);
} else {
$module_content = '<p>No content available for this module.</p>';
}
}
// Assign content to the correct module section
if ($module_types && is_array($module_types)) {
foreach ($module_types as $module_type) {
if (isset($modules[$module_type])) {
$modules[$module_type][] = array(
'slug' => get_post_field('post_name', $module_id),
'title' => !empty($module_title) ? $module_title : get_the_title(),
'content' => $module_content // Assign the correct content based on the module type
);
}
}
}
}
}
wp_reset_postdata();
// Display the modules
$isFirstModule = true;
foreach ($modules as $moduleType => $moduleList) {
if (!empty($moduleList)) {
echo '<section class="module_wrap_section">';
echo '<div class="module_wrap">';
echo '<div class="module_inner">';
echo '<div class="module_inner_header">';
echo '<h2>' . esc_html($moduleType) . '</h2>'; // Display the module type as a section header
echo '</div>';
foreach ($moduleList as $module) {
if ($isFirstModule) {
// Display the content for the first module
echo '<div class="module_inner_content">';
echo '<div class="module_content">' . $module['content'] . '</div>';
echo '</div>';
$isFirstModule = false; // Set to false after loading the first module
} else {
// Display the content for other modules
echo '<div class="module_inner_content">';
echo '<div class="module_content">' . $module['content'] . '</div>';
echo '</div>';
}
}
echo '</div>';
echo '</div>';
echo '</section>';
}
}
?>
</div>
</main>
<aside class='sidebar units <?php avia_layout_class('sidebar'); ?>' role="complementary" itemscope="itemscope" itemtype="https://schema.org/WPSideBar">
<div class="module_menu">
<div class="course-title">
<h1><?php the_title(); ?></h1>
</div>
<div class='inner_sidebar'>
<ul id="module-links">
<?php
$icons = array(
'Course Overview' => 'fas fa-book-open',
'Welcome' => 'fas fa-handshake',
'Course Video' => 'fas fa-video',
'Quiz Questions' => 'fas fa-question-circle',
'Next Steps' => 'fas fa-tasks'
);
$order = ['Course Overview', 'Welcome', 'Course Video', 'Quiz Questions', 'Next Steps'];
foreach ($order as $type) {
if (!empty($modules[$type])) {
if ($type == 'Course Overview' || $type == 'Welcome' || count($modules[$type]) == 1) {
$item = $modules[$type][0];
$icon = isset($icons[$type]) ? $icons[$type] : 'fas fa-file';
echo '<li>';
echo '<a href="#" data-module="' . esc_attr($item['slug']) . '" data-course-id="' . esc_attr($course_id) . '"><i class="' . esc_attr($icon) . '"></i> ' . esc_html($type) . '</a>'; // Display correct title
echo '</li>';
} else {
echo '<li class="dropdown">';
$icon = isset($icons[$type]) ? $icons[$type] : 'fas fa-file';
echo '<a href="#" class="dropdown-toggle"><i class="' . esc_attr($icon) . '"></i> ' . esc_html($type) . '</a>';
echo '<ul class="dropdown-menu">';
foreach ($modules[$type] as $item) {
echo '<li><a href="#" data-module="' . esc_attr($item['slug']) . '" data-course-id="' . esc_attr($course_id) . '">' . esc_html($item['title']) . '</a></li>'; // Display correct title
}
echo '</ul>';
echo '</li>';
}
}
}
?>
</ul>
</div>
</div>
</aside>
</div><!-- end container -->
<div class="module_bottom_bar">
<div class="module_bottom_bar_buttons">
<div id="next-module-container">
<button id="prev-module">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<polygon points="19 4 9 12 19 20 19 4" />
<line x1="5" x2="5" y1="5" y2="19" />
</svg>
<span>Previous</span>
</button>
<button id="next-module">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<polygon points="5 4 15 12 5 20 5 4" />
<line x1="19" x2="19" y1="5" y2="19" />
</svg>
<span>Next</span>
</button>
</div>
</div>
</div>
</div><!-- end course_wrap -->
<?php
get_footer();
?>
<script>
jQuery(document).ready(function($) {
var modules = <?php echo json_encode($modules); ?>;
var moduleOrder = [];
// Flatten the modules array to get a list of modules in the order they are displayed
$.each(modules, function(type, moduleGroup) {
$.each(moduleGroup, function(index, module) {
moduleOrder.push({
slug: module.slug,
content: module.content
});
});
});
var currentModuleIndex = 0;
function loadModule(moduleSlug) {
$('#module-content-wrap').html('<div class="loading-indicator">Loading module...</div>');
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'POST',
data: {
action: 'load_module_content',
nonce: '<?php echo wp_create_nonce('rp_ajax_nonce'); ?>',
module: moduleSlug
},
success: function(response) {
if (response.success) {
$('#module-content-wrap').html(response.data.content);
} else {
console.error('Error loading module content:', response.data.message);
$('#module-content-wrap').html('<p>Error loading module content. Please try again later.</p>');
}
},
error: function(xhr, status, error) {
console.error('AJAX Error:', error);
$('#module-content-wrap').html('<p>An unexpected error occurred while loading the module. Please try again later.</p>');
}
});
}
// Initial load of the first module
loadModule(moduleOrder[currentModuleIndex].slug);
// Handle sidebar link clicks
$('#module-links a').on('click', function(e) {
e.preventDefault();
var moduleSlug = $(this).data('module');
currentModuleIndex = moduleOrder.findIndex(module => module.slug === moduleSlug);
loadModule(moduleOrder[currentModuleIndex].slug);
});
// Handle Next and Previous button clicks
$('#next-module').on('click', function(e) {
e.preventDefault();
currentModuleIndex++;
if (currentModuleIndex >= moduleOrder.length) {
currentModuleIndex = 0; // Loop back to the first module
}
loadModule(moduleOrder[currentModuleIndex].slug);
});
$('#prev-module').on('click', function(e) {
e.preventDefault();
currentModuleIndex--;
if (currentModuleIndex < 0) {
currentModuleIndex = moduleOrder.length - 1; // Loop back to the last module
}
loadModule(moduleOrder[currentModuleIndex].slug);
});
});
</script>
functions.php
function get_module_content($module_id)
{
$module_content = get_post_meta($module_id, 'module_content', true);
// Check if content is empty
if (empty($module_content)) {
return ''; // Or handle empty content as needed
}
// Basic formatting or filtering can be done here
return apply_filters('the_content', $module_content);
}
function load_first_module($modules)
{
$priority_order = ['Course Overview', 'Welcome', 'Course Video', 'Quiz Questions', 'Next Steps'];
foreach ($priority_order as $module_type) {
if (isset($modules[$module_type]) && !empty($modules[$module_type])) {
$first_module = $modules[$module_type][0]; // Load the first available module of this type
load_module($first_module['slug'], $first_module['course_id']);
return;
}
}
}
function load_module_content()
{
check_ajax_referer('rp_ajax_nonce', 'nonce');
$module_slug = sanitize_text_field($_POST['module']);
$args = array(
'name' => $module_slug,
'post_type' => 'module',
'posts_per_page' => 1
);
$module_query = new WP_Query($args);
if ($module_query->have_posts()) {
$module_query->the_post();
$module_id = get_the_ID();
$module_content = apply_filters('the_content', get_post_meta($module_id, 'module_content', true));
wp_send_json_success(array(
'content' => $module_content
));
} else {
wp_send_json_error(array('message' => 'Module not found.'));
}
wp_die();
}
add_action('wp_ajax_load_module_content', 'load_module_content');
add_action('wp_ajax_nopriv_load_module_content', 'load_module_content');
function load_module_content_callback()
{
if (!isset($_GET['module'])) {
wp_send_json_error(['error' => 'No module specified.']);
}
$module_slug = sanitize_text_field($_GET['module']);
$module_post = get_page_by_path($module_slug, OBJECT, 'module');
if (!$module_post) {
wp_send_json_error(['error' => 'Module not found.']);
}
$module_id = $module_post->ID;
$module_title = get_the_title($module_id);
$module_content = apply_filters('the_content', $module_post->post_content);
$featured_image = get_the_post_thumbnail($module_id, 'full');
$response = [
'title' => $module_title,
'content' => $module_content,
'featured_image' => $featured_image ? $featured_image : ''
];
wp_send_json_success($response);
}
add_action('wp_ajax_load_module_content', 'load_module_content_callback');
add_action('wp_ajax_nopriv_load_module_content', 'load_module_content_callback');
function display_module_section($module_type, $module_id, $video_labels)
{
switch ($module_type) {
case 'course_overview':
case 'welcome':
case 'quiz_questions':
case 'next_steps':
echo '<h2>' . esc_html(ucwords(str_replace('_', ' ', $module_type))) . '</h2>';
echo apply_filters('the_content', get_post_meta($module_id, $module_type . '_content', true));
break;
case 'course_video':
echo '<h2>Course Videos</h2>';
if (!empty($video_labels)) {
// ... existing code for displaying video labels ...
} else {
// Handle case where there are no video labels but the module type is 'course_video'
$module_content = get_post_meta($module_id, 'course_video_content', true);
if (!empty($module_content)) {
echo '<div class="module_content">' . apply_filters('the_content', $module_content) . '</div>';
} else {
// Handle empty content for course video
}
}
break;
default:
echo '<p>Invalid module type.</p>';
break;
}
}
function handle_module_loading()
{
$course_id = isset($_POST['course_id']) ? intval($_POST['course_id']) : 0;
if ($course_id) {
$modules = get_course_modules($course_id);
if (!empty($modules)) {
// Process and return the modules
wp_send_json_success(array('modules' => $modules));
} else {
wp_send_json_error('No modules found for this course.');
}
} else {
wp_send_json_error('Invalid course ID.');
}
}
add_action('wp_ajax_load_modules', 'handle_module_loading');
add_action('wp_ajax_nopriv_load_modules', 'handle_module_loading');
Problem: The modules are not loading when I click on the module buttons. I have checked the console for errors and found the following message: “Error loading module content: No content found for this module.”
What I’ve Tried:
Verified that the module slugs are correct.
Ensured that the AJAX request is being sent and received.
Checked the PHP function to ensure it is returning the correct content.
Question: What could be causing the modules not to load on click, and how can I fix this issue?
Any help would be greatly appreciated. Thank you!
