CODEWITHSUNDEEP
javascriptjquerynode.js
lpetrucci
lpetrucci

Reputation: 1699

Using Jquery in NodeJS

I'm having trouble getting jQuery to produce any kind of result with NodeJS. I followed this post to actually get it to work through Node, so now my page displays. However none of the code I write in jQuery actually does anything.

Just to be extra sure I copied the example from jquery.com exactly, but that also fails to work. The console doesn't tell me anything either.

Here's my code

index.html:

<html>
<body>

 <p>
   <b>Click</b> to change the <span id="tag">html</span>
 </p>
 <p>
   to a <span id="text">text</span> node.
 </p>
 <p>
   This <button name="nada">button</button> does nothing.
 </p>
</body>
</html>

header.js

var http = require('http');
var fs = require('fs');
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

var $ = jQuery = require('jquery')(window);

http.createServer(function (req, res) {
  fs.readFile('/home/leonardo/Desktop/Header/index.html', function(err, data) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    res.end();
  });

}).listen(8080);

$( "p" ).click(function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );
});

I'm very new to Node and also very confused.

Upvotes: 2

Views: 3089

Answers (1)

Kamil Naja
Kamil Naja

Reputation: 6692

Node.js is backend side of your app, jQuery work at frontend side, in browser. Create separate file for jQuery, for frontend code, and add this file to the index.html.

<html>
<body>

 <p>
   <b>Click</b> to change the <span id="tag">html</span>
 </p>
 <p>
   to a <span id="text">text</span> node.
 </p>
 <p>
   This <button name="nada">button</button> does nothing.
 </p>
<script src="index.js"></script>
</body>
</html>

and jQuery file index.js

 $( "p" ).click(function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );
 });

Upvotes: 1

Related Questions