// Function to load HTML content async function loadContent(sectionId, contentFile) { try { console.log(`Loading content for ${sectionId} from ${contentFile}`); // Use relative path instead of absolute path const response = await fetch(`../content/${contentFile}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const html = await response.text(); console.log(`Successfully loaded content for ${sectionId}`); // Find the section and update its content const section = document.getElementById(sectionId); if (section) { section.innerHTML = html; console.log(`Successfully updated content for ${sectionId}`); } else { console.error(`Section element not found for ${sectionId}`); } } catch (error) { console.error(`Error loading content for ${sectionId}:`, error); console.error(`Error details:`, { sectionId, contentFile, error: error.message, stack: error.stack }); // Show error message in the section const section = document.getElementById(sectionId); if (section) { section.innerHTML = `

Error

Could not load content. Please try refreshing the page.

Error details: ${error.message}

`; } } } // Load content when the page loads document.addEventListener('DOMContentLoaded', () => { console.log('DOM Content Loaded - Starting content loading'); // Map of section IDs to content files const contentMap = { 'announce': 'announce.html', 'date': 'date.html', 'showmetheway': 'directions.html', 'rsvp': 'rsvp.html', 'campinfos': 'campinfos.html', 'y2024': 'y2024.html' }; // Load content for each section Object.entries(contentMap).forEach(([sectionId, contentFile]) => { console.log(`Queueing content load for ${sectionId} from ${contentFile}`); loadContent(sectionId, contentFile); }); });