0

I looked an a few similar questions on stack (like this)but none of them seem to help me, even though my issue seems similar.

I am new to node and server side scripting and would prefer to not use more frameworks/components.

I have a drawing app written fully in javascript (jquery) and I want to host it using node as my backend.

My folder structure is like this:

├── README.md
├── app.js
├── css
├── db.js
├── model.js
├── package.json
├── public
│   ├── css
│   │   └── simple.css
│   └── js
│       ├── jquery.min.js
│       └── testjs.js
├── route.js
├── schema.sql
├── schema_macaronic.sql
├── node_modules +
└── views
    ├── 404.jade
    ├── index.jade
    ├── signin.jade
    └── signup.jade

All of my code is in public/js/testjs.js. testjs.js uses jquery, underscore and some other js libraries. I would like to call functions in this file in my views index.jade, signin.jade etc.

I have the following line in my app.js

app.use(express.static(path.join(__dirname, 'public')));    
app.use('/jquery', express.static(path.join(__dirname, '/public/js')));

and in signin.jade I looks like this:

doctype html
html(lang='en')
    head
        link(rel='stylesheet', href='/css/simple.css')
        script(type="type/javascript",src="/jquery/jquery.min.js")
        //script(type="type/javascript",src="js/testjs.js")
        title #{title}
    body
        script.
            $(document).ready(function() {
                console.log('hello form js and jquery')
            });
        h2 Sign In Form
        form(method='post', action='/signin')
            p
                label(for='username') username
                input#username(type='text', name='username', placeholder='username', required='true')
            p
                label(for='password') password
                input#password(type='text', name='password', placeholder='password', required='true')
            p
                input#signin(type='submit', name='signin', value='sign in')
                a(href='/signup', title='register') register

When i reach the index page I see a Uncaught ReferenceError: $ is not defined at line 10 ($(document).ready(function())

What am I doing wrong? The entire project is here on github.

Note: the css is working (color changes to red based on css in public/css/simple.css.

Also, I need more that just jquery on the client side, I have around 2-3 js files that are meant to be run on client side, how can I make them also visible to the client side views?

Community
  • 1
  • 1
A.D
  • 1,480
  • 2
  • 18
  • 33

3 Answers3

2

In the app.js, alter the lines:

app.use(express.static(path.join(__dirname, 'public')));    
app.use('/jquery', express.static(path.join(__dirname, '/public/js')));

To:

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

This way, all css and js files can be accessed.

Jade file (the jquery path is wrong in your code):

link(rel='stylesheet', href='/css/simple.css')
script(type="type/javascript",src="/js/jquery.min.js")
BrTkCa
  • 4,703
  • 3
  • 24
  • 45
  • The error `Uncaught ReferenceError: $ is not defined` do not means the Jquery not loaded, but can be caused the version of Jquery (some function do not work in different versions) or the order of the loading of the libraries, some like this: http://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined – BrTkCa Oct 08 '15 at 17:53
  • I get the same error for any external js file.. for example in my code i have '/js/testjs.js' which has a function called 'somefunc' .. i get 'Uncaught ReferenceError: somefunc is not defined' if I call it from jade. – A.D Oct 08 '15 at 17:57
1

You should just use

script(type="type/javascript",src="/js/jquery.min.js")

And get rid of this line:

app.use('/jquery', express.static(path.join(__dirname, '/public/js')));
Jimi
  • 901
  • 7
  • 11
  • added the '/' it still does not work.. I still get the same error. – A.D Oct 08 '15 at 16:46
  • both /js/jquery.min.js and /jquery/jquery.min.js give the same error. Also it is not just limited to jquery... any external js file is not visible to jade. – A.D Oct 08 '15 at 16:48
  • try eliminating the line at the bottom of my answer ```app.use```... etc. – Jimi Oct 08 '15 at 16:48
  • can you tell us what ```http://localhost:{port-you-use}/js/jquery.min.js``` return in your browser? – Jimi Oct 08 '15 at 16:58
  • still does not work i added the '/' app.use(express.static(__dirname + '/public')); – A.D Oct 08 '15 at 17:01
  • What I'm interested in is if you can hit ```http://localhost:{port-you-use}/js/jquery.min.js``` in your browser so in your case it would be ```http://localhost:3000/js/jquery.min.js```. Do you see a file when you do this? Also have you removed the ```app.use``` line from my comment above ^ – Jimi Oct 08 '15 at 17:09
  • Yes I can see the the file when i type in : http://localhost:3000/js/jquery.min.js ---- so maybe the js files are loading after jade tries to call them?? And yes I removed the redundent app.use – A.D Oct 08 '15 at 17:13
  • now that the ```app.use``` line is gone, you'll need to change your jquery path to ```/js/jquery.min.js``` as I suggested ^ let me know if that works – Jimi Oct 08 '15 at 17:18
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/91777/discussion-between-adi-and-jimi). – A.D Oct 08 '15 at 17:18
0

Ok It is something to do with doctype html and html(lang='en') removing it seems to make it work. (makes sense because its not html?)

New jade view:

doctype
html
    head
        title #{title}
        link(type='text/css', rel='stylesheet', href='/css/simple.css')
        script(type='text/javascript', src='/js/jquery.min.js')
        script(type='text/javascript', src='/js/testjs.js')
    body
        script.
            $(document).ready(function() {
                console.log('hello form js and jquery')
                helloinfile('adi')
            });
        h2 Sign In Form

        form(method='post', action='/signin')
            p
                label(for='username') username
                input#username(type='text', name='username', placeholder='username', required='true')
            p
                label(for='password') password
                input#password(type='text', name='password', placeholder='password', required='true')
            p
                input#signin(type='submit', name='signin', value='sign in')
                a(href='/signup', title='register') register

I can see both the console messages from console.log and from helloinfile. The full code is update on github.

A.D
  • 1,480
  • 2
  • 18
  • 33