Difficulty Displaying Dynamic Content with Plain JavaScript - Routing Issues

Question

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:

Checked the existence of the "app" element in Dashboard.html.
Verified that the script tag in Dashboard.html points to the correct JavaScript file.
Ensured that the file path to Dashboard.js is correct.
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?

Codesandbox

Not able to reproduce. sandbox. If you're serving locally you may have an origin issue. see: Load local javascript file in chrome for testing? or Unable to link js file to html to load local files or JS and CSS doesn't load on local — pilchard
– pilchard, Commented Sep 4, 2023 at 20:42
Your code snippet works just fine. Are you serving locally from localhost)? — esQmo_
– esQmo_, Commented Sep 4, 2023 at 20:48
@esQmo_ I am suign vite. When i use a normal div isnide the 'Dashboard.html' It perfectly renders but using it from the Javascript file it doesn't work. — Tittoh
– Tittoh, Commented Sep 4, 2023 at 20:58
Can you make sure that your JS file is loaded? What does the console show? We can't do much from here because your code is correct and even the snippet works in here — esQmo_
– esQmo_, Commented Sep 4, 2023 at 21:06
I have updated the code and the errors also I have added a codesandbox link of how my project structure looks like. I have included hashnode blogs to explain each section of routing pages — Tittoh
– Tittoh, Commented Sep 5, 2023 at 2:00

fedeghe · Accepted Answer · 2023-09-04 21:15:07Z

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

edited Sep 4, 2023 at 21:15

answered Sep 4, 2023 at 21:07

fedeghe

1,31714 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bambolas · Accepted Answer · 2023-09-05 11:03:23Z

-1

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);
}

edited Sep 5, 2023 at 11:03

answered Sep 4, 2023 at 20:56

bambolas

803 silver badges11 bronze badges

3 Comments

esQmo_ Over a year ago

OP asked fro vanilla JS, why would you offer something else?

bambolas Over a year ago

@esQmo_ I know. I can read. I'm suggesting jQuery because its better for manipulating the HTML DOM with a more intuitive syntax. Thats why it exists. It'll just make OP's life easier

Tittoh Over a year ago

I have also included vanilla JS and jQuery for both rendering in Dashboard html in code sandbox. I have tried both but there's no change.

Collectives™ on Stack Overflow

Difficulty Displaying Dynamic Content with Plain JavaScript - Routing Issues

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related