CODEWITHSUNDEEP
javascriptnode.jsejs
Jatin verma
Jatin verma

Reputation: 71

Resources are not loaded in Chrome

I am using EJS to render HTML. But the same HTML thing gets loaded for one route and when tried with another route chrome shows the status of CSS files as cancelled and js files with status code 404. I am unable to get what is going wrong. It works for the '/' route but does not work for the '/admin/students' route. Please help. In the table, I am printing the data sent through route. In '/' route I am just sending a text as a data and everything else is the same as giving the code below.

 app.get('/',(req,res)=>{
 res.render('layout',{data:"IT is working"});
 });

 app.get('/admin/students',(req,res)=>{
  Student.find({},function(err,result){
    if(err)
        console.log(err);
    else
        res.render('student',{st:result});
  })
 })


<!DOCTYPE HTML>
<html lang="zxx" class="no-js">

<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/fav.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>Blog Home</title>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700" 
rel="stylesheet" />
<!--
  CSS
  =============================================
-->

<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />

</head>

<body>
<!-- ================ Start Header Area ================= -->

<header class="default-header">
<nav class="navbar navbar-expand-lg  navbar-light">
  <div class="container">
    <a class="navbar-brand" href="index.html">
    <img src="img/logo.png" alt="" />
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
     target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="lnr lnr-menu"></span>
      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse justify-content-end align-items-center" 
    id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/admin">Admin</a></li>
        <li><a href="#">User</a></li>
      
      
      </ul>
    </div>
  </div>
</nav>

</header>

<section class="banner-area" style="background: url('img/home.png')" >
<div class="container">
  
  <div class="row justify-content-center align-items-center">
    <div class="col-lg-12 banner-right">
      <h1 class="text-white">
          Blog Home
      </h1>
      <p class="mx-auto text-white  mt-20 mb-40">
        In the history of modern astronomy, there is probably no one greater leap forward than the 
        building.
      </p>
      <div class="link-nav">
        <span class="box">
          <a href="index.html">Home </a>
          <i class="lnr lnr-arrow-right"></i>
          <a href="blog-home.html">Blog Home</a>
        </span>
      </div>
    </div>
  
  </div>
  </div>
  </section>

  <table class="table">
  <thead class="thead-dark">
  <tr>
  <th scope="col">Reg.No.</th>
  <th scope="col">Name</th>
  <th scope="col">Branch</th>
  <th scope="col">Handle</th>
   </tr>
  </thead>
  <body>

  <% st.map(rec=>{ %>
  <tr style="color:black">
    <th scope="row"><%=rec._id%></th>
    <td><%=rec.sname%></td>
    <td><%=rec.branch%></td>
    <td><form action="/students/<%=rec._id%>/edit}"></form></td>
  </tr>
   <% }) %>

  </tbody>
  </table>



  <footer class="footer-area section-gap">

  <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | 
  This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a 
    href="https://colorlib.com" target="_blank">Colorlib</a>
   <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
    
  </footer>
  <!-- ================ End footer Area ================= -->

  <script src="js/vendor/jquery-2.2.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" 
  integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
  crossorigin="anonymous"></script>
   <script src="js/vendor/bootstrap.min.js"></script>
   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? 
    key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
   <script src="js/jquery.ajaxchimp.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
   <script src="js/parallax.min.js"></script>
   <script src="js/owl.carousel.min.js"></script>
   <script src="js/jquery.sticky.js"></script>
   <script src="js/hexagons.min.js"></script>
   <script src="js/jquery.counterup.min.js"></script>
   <script src="js/waypoints.min.js"></script>
   <script src="js/jquery.nice-select.min.js"></script>
    <script src="js/main.js"></script>



   </body>

   </html>

Upvotes: 1

Views: 138

Answers (1)

Rustam D9RS
Rustam D9RS

Reputation: 3491

You should use absolute paths of static files instead of relative ones. Example:

<script src="js/main.js"></script>

should be:

<script src="/js/main.js"></script>

Similarly, you should fix the paths for all static files (css, js, etc.) in your EJS files.

You can read more about absolute and relative paths here.

Upvotes: 1

Related Questions