jQuery in HTML with node.js as backend

Question

I'm new to jQuery and node.js and this question has been bugging me for a couple of hours, I've searched stackoverflow and googled but couldn't find a solution.

I'm testing this "hello world" example in jQuery and I tried running it with node.js, but it didn't work.

Here is my code for node.js server:

var express = require('express');
var fs = require("fs");
var app = express.createServer(express.logger());
var path = require('path');

var indexText = fs.readFileSync("test.html");

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


app.get('/', function(request, response) {
  response.send(indexText.toString());
});

var port = process.env.PORT || 8080;
app.listen(port, function() {
  console.log("Listening on " + port);
});

So as you can see, I tried use express.static() to tell the node.js where jQuery lib is located. Here is the html for test.html:

<html>
<head>
<title>jQuery Hello World</title>

<script type="text/javascript" src="/jquery/jquery-1.2.6.min.js"></script>

</head>

<body>

<script type="text/javascript">

$(document).ready(function(){
 $("#msgid").html("This is Hello World by JQuery");
});

</script>

This is Hello World by HTML

<div id="msgid">
</div>

</body>
</html>

It should print:

This is Hello World by HTML This is Hello World by JQuery

but it only prints hello from HTML

The question might be stupid but I'm new to this so I require your help. Thank you.

Do you have any errors in your console? Errors on the network tab? — Jason P
– Jason P, Commented Jul 18, 2013 at 19:50
Nothing, it works completely fine just doesn't print anything from jQuery. — Drag0
– Drag0, Commented Jul 18, 2013 at 19:50
Are you really sure that the console of your browser does not show an error message? (Not the console of node.) — t.niese
– t.niese, Commented Jul 18, 2013 at 20:18

Drag0 · Accepted Answer · 2013-07-18 21:52:58Z

7

Ok, I found a solution to what I was asking. Here is a git repository with code that helped me:

https://github.com/jmhdez/Nodejs-Sample

and here is the tutorial with the code (it is on Spanish, but let the Google Chrome translate the entire page for you, it is ok)

http://blog.koalite.com/2011/11/tutorial-node-js-express-jquery-i-creando-la-aplicacion/

Thanks everyone once again for your help

answered Jul 18, 2013 at 21:52

Drag0

9,0289 gold badges43 silver badges53 bronze badges

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

2 Comments

Morgan ARR Allen Over a year ago

Can you explain the solution a bit? I'm still curious what exactly was wrong.

Drag0 Over a year ago

well only thing is that here github user jmhdez uses module jade to render views and I didn't use jade, I used pure html.. I don't know still why it works with jade

Morgan ARR Allen · Accepted Answer · 2013-07-18 20:24:34Z

2

app.use with a string as the first arguments is a prefix. Meaning the any middleware applied after with be located under that prefix. In the case of your express.static for jquery, it will be located in /jquery

So, in you HTML the src for jquery-1.2.6 should be found under /jquery/jquery-1.2.6.js

You can test this by trying to load

http://localhost:8080/jquery/jquery-1.2.6.min.js

instead of

http://localhost:8080/jquery-1.2.6.min.js

edited Jul 18, 2013 at 20:24

answered Jul 18, 2013 at 20:15

Morgan ARR Allen

10.7k3 gold badges38 silver badges33 bronze badges

5 Comments

Drag0 Over a year ago

directory structure is like this: "/web.js" and "/jquery/jquery-1.2.6.js" web.js is node.js code where I start my server, so that should be ok I guess.. but it doesn't work

Morgan ARR Allen Over a year ago

But the point still remain, the first argument of use is a prefix. you could use /js instead and point static to your jQuery directory. The browser on the other hand doesn't know any of that and will need to look at the prefex directory. try this.. load localhost:8080/jquery-1.2.6.min.js then try localhost:8080/jquery/jquery-1.2.6.min.js

Drag0 Over a year ago

I am sorry, I accidentally edited your comment.. yes I know that, and when I go to localhost:8080/jquery/jquery-1.2.6.min.js it shows me entire jQuery code, but it doesn't work when I run web.js, jQuery just doesn't run

Morgan ARR Allen Over a year ago

Have you changed the src in the script tag in the HTML?

Drag0 Over a year ago

yes I did, now it is like this: <script type="text/javascript" src="/jquery/jquery-1.2.6.min.js"></script>

Collectives™ on Stack Overflow

jQuery in HTML with node.js as backend

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related