Scripts not being called

Scripts not being called

Problem

I am using ExpressJS. My scripts or CSS will not load.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Customer Info</title>

    <link rel="stylesheet" href="/stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>

    <script type="text/javascript" src="/javascripts/jquery-1.9.1.js"></script>
    <script src="/javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" src="/javascripts/testing.js"></script>



  </head>
   <body>
        //body contents
   </body>
</html>

I know the problem is not with the location. When I render this EJS view in express none of the scripts are loading. I can not understand why it would work for an almost identical view, but not this one. Any ideas?

Problem courtesy of: Four_lo

Solution

Step 1

In your node.js file locate the part where you configure the express.

It would be like.

 var express = require('express')
               , app = express();

 app.configure(function() {
    //configure the express codes go here
 }

in that check out the line of code where you configure the folder which serves the static files. like images,css, and js. I would be like.

app.use(express.static(__dirname + '/public'));

here in the above case public should be exactly the name of the parent folder which holds the stylesheets and javascripts folder that you mentioned in the above html.

like

--app.js
--package.json
--views/
--node_modules/
--public/
     --stylesheets/
        --testing.css
     --javascripts/
        --jquery-1.9.1.js
        --jquery-ui-1.10.2.custom.js
        --testing.js

Step 2

If the above is configured correctly then you can make sure

app.use(express.static(__dirname + '/public'));

in config comes ahead of

app.use(app.router);

so that you can make assure that your line is not ignored by a 404 route handler you written in the router.

Step 3

You can inspect the rendered page with Firebug or Chrome inspector and check in the networks tab what was the response you received for the js and css files you have mentioned. As per you question it should be 404 file not found and if its something else you should update it in the question.

Step 4

If you still cant fix the issue then you have to update the question with the node.js codes you are using. So that we could look into it.

Solution courtesy of: mithunsatheesh

Discussion

Leave a Reply

Your email address will not be published. Required fields are marked *