Question 244101 in Html Question posted in
Some basic documentation can be found here.

Html – Difficulty Displaying Dynamic Content with Plain JavaScript – Routing Issues

INITIAL ISSUE

ISSUE

I’m currently working on a web project and I’m encountering an issue where I’m unable to display dynamic content using plain JavaScript. I’m trying to create a simple dashboard page that renders "Hello, this is the dashboard!" on the screen, but the content isn’t showing up when I open the page.

DESCRIPTION

I have a dashboard page (Dashboard.html) and a JavaScript file (Dashboard.js) responsible for rendering the content. Here’s my code:

// Dashboard.js
const app = document.getElementById("app");

const createDashboardPage = () => {
    const container = document.createElement("div");

    container.innerHTML = `
        <h1>Hello, this is the dashboard!</h1>
        <p>This is a simple dashboard page.</p>
    `;

    return container;
};

const dashboardPage = createDashboardPage();

app.appendChild(dashboardPage);
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dashboard</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- Include the Dashboard.js script -->
    <script type="module" src="./Dashboard.js"></script>
  </body>
</html>

However, when I open Dashboard.html in my browser, the content is not displayed. I have verified that the element with the ID "app" exists, and there are no errors in the browser console.

What I’ve Tried:

  1. Checked the existence of the "app" element in Dashboard.html.
  2. Verified that the script tag in Dashboard.html points to the correct
    JavaScript file.
  3. Ensured that the file path to Dashboard.js is correct.
  4. Confirmed there are no JavaScript errors in the browser console.

What could be causing the content not to display, and how can I resolve this issue? Are there any common pitfalls I should be aware of when working with plain JavaScript to render dynamic content on a web page?

INITIAL ISSUE ADDED INFORMATION
I have decided to make a detailed structure of the project.

Incase you are new to page and how each file below works I have written a quick blog on hashnode for each file. I have linked blog link to each page.

I have also included a basic layout of Codesandbox
I have a basic structure for my project:

  • pageLoader.js: This module loads HTML content for different pages from their respective files.
    Hasnode
//load page. 


export const loadPage = async (page) => {
  const response = await fetch(page);
  return response.text();
};

export const loadAllPages = async () => {
  const pages = {};

  // Load index.html from the root directory
  pages.home = await loadPage('index.html');

  // Load other pages from the 'userPages' directory
  pages.about = await loadPage('userPages/about.html');

  return pages;
};
  • router.js:

It manages the navigation within your web app, ensuring that users can seamlessly move between different views or pages without triggering full-page refreshes.
Hashnode, and History Manipulation

// router.js

import { loadAllPages } from './loadPage';
import { onPopState, pushState } from './pageHistory'; // Import history-related functions

const routes = new Map();

const loadRoutes = async () => {
  // Load your routes here
  // For example, you can load pages from loadAllPages()
  const pages = await loadAllPages();
  routes.set('/', pages.home);
  routes.set('/about', pages.about);
  routes.set('/dashboard', pages.dashboard);
};

const handle404 = () => {
  const root = document.getElementById('root');
  root.innerHTML = `<div > Sorry we cannot find this page</div>
`;
};

// Define and export onNavClick handler
export const onNavClick = async (pathname) => {
  const root = document.getElementById('root');

  if (!routes.has(pathname)) {
    handle404();
    return;
  }

  const pageContent = routes.get(pathname);
  root.innerHTML = pageContent;

  // Update the URL using the pushState function from history
  pushState({}, '', pathname);
};

const handleRouting = () => {
  const pathname = window.location.pathname;
  onNavClick(pathname);
};

const router = async () => {
  await loadRoutes();

  // Set up routing
  window.addEventListener('popstate', handleRouting);

  // Trigger initial routing
  handleRouting();
};

router();

issue:

The dashboard page content is not rendering as expected. When I navigate to the dashboard route, I see a blank page, and the dashboard content is missing.

Additional Information:

All other routes (e.g., /about, etc.) are working correctly.
I have included jQuery in the HTML file as suggested before but there was no change.
I’m not receiving any error messages in the console.

Question:

What could be causing the issue with rendering the dashboard page content?
How can I ensure that the dashboard page content is correctly loaded and displayed?
Any insights or suggestions would be greatly appreciated. Thank you!

Codesandbox

Tags:

2

Answers


  1. 0

    I would suggest to try creating the element and dynamically displaying it using jQuery instead of vanilla JavaScript.

    Code would look something like this:

    $(function() {
   createDashboardTitle();
});

createDashboardTitle() {
  let app = $('.app');
  let container = document.createElement('container');
  container.innerHTML = `
    <h1>Hello, this is the dashboard!</h1>
    <p>This is a simple dashboard page.</p>
  `;
  app.append(container);
}
    Login or Signup to reply.
  2. 0

    The type="module" attribute in that case does not make sense, remove the attribute and everything will work as expected.
    In case the purpose of the module was for you to avoid defining variables in the global scope then, just wrap everything in a IIFE

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search