4

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.

Drag0
  • 8,438
  • 9
  • 40
  • 52

2 Answers2

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

Drag0
  • 8,438
  • 9
  • 40
  • 52
  • Can you explain the solution a bit? I'm still curious what exactly was wrong. – Morgan ARR Allen Jul 18 '13 at 22:47
  • 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 – Drag0 Jul 19 '13 at 20:56
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
Morgan ARR Allen
  • 10,556
  • 3
  • 35
  • 33
  • 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 – Drag0 Jul 18 '13 at 20:20
  • 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 – Morgan ARR Allen Jul 18 '13 at 20:22
  • 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 – Drag0 Jul 18 '13 at 20:34
  • Have you changed the src in the script tag in the HTML? – Morgan ARR Allen Jul 18 '13 at 20:35
  • yes I did, now it is like this: – Drag0 Jul 18 '13 at 20:37