Thiết kế website giá rẻ

Question

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!

Thiết kế website giá rẻ

Danh mục

jQuery Module Not Loading on Click from Module Buttons