How do I include jQuery code in my node.js web app?

Question

so I've been working on a (fairly simple) RESTful app using node.js, and I've made it towards the very last bit, now the only bit missing is using jQuery to manipulate the html page so I can edit the content of the html - and it's driving me absolutely mad.

I took the try.jquery.com tutorial, and it was pretty smooth; I'd by no means call myself a master of jquery, but I have very little trouble writing the code for basic html manipulation, except I never really considered where the jquery code would go. I've tried a bunch of different stuff and only one (really inconvenient) way has worked, so I was wondering if I could get some clarification.

(Note: all the js files are in the root folder, and index.html is in root/public; and I'm basically just running app.js through npm/package.json)

I've tried including the jQuery code in the main app.js file:

app.js

//some imports/requires here
var $ = require('jquery');
//more imports/requires here

//error; document is undefined
$(document).ready($('h1').text('Im Here');

app.get('/', function (req, res) {

    res.sendFile(__dirname+'/public/index.html');

});

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <title>Inspiratorator</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script="../app.js"></script>

I've tried including the jQuery code in its own file (tried just letting the code sit in the js file, and tried exporting the code as a function and calling it from app.js - both did nothing):

jusQueryin.js

var $ = require('jQuery'); //tried with and without this

$(document).ready(function () {
    $(' button ').on( 'click', $('h1').text("I'm here") );
    console.log('kpa'); 
});

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <title>Inspiratorator</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script="../jusQueryin.js"></script>

I've also tried (this worked, but I don't know how I would deal with the code in here from other .js file, if it is possible):

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <title>Inspiratorator</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script>
        $(document).ready(function () {
        $(' button ').on( 'click', $('h1').text("I'm here") );
        console.log('kpa'); 
    });
</script>

I've also tried different variations(i.e. including the 2nd part of the ready function in a function (or not), using an onClick event inside the dom.ready function, etc..), but the only one that worked was the last approach

Ideally, I'd like to be able to use the jQuery code inside app.js, less ideally would be in its own file; or if I have to include it inside the html file for some reason, I would at least need to be able to communicate with the code in the script block so that I can give it info from the database and so on.

Possible duplicate of [Can I use jQuery with Node.js?](http://stackoverflow.com/questions/1801160/can-i-use-jquery-with-node-js) — urbz, Feb 29 '16 at 13:33

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

Remeber one thing jQuery needs a window object to work. The first functionality of jquery is as dom query, dom is within a window object. As a result you must load the jquery and attach it to a window object.

As a node app you will have a browser window as a view to your app. Try adding jquery to that window from a CDN, add your requires there, voila the containing scope(window) which contains jquery now as global passes it also to the newly required file.

Error: jQuery requires a window with a document

index.html

 <script>
        window.$ = window.jQuery = require('./node_modules/jquery');
  </script>
  <script>
        var UI = require('./controllers/UI');
        UI.init(window);
  </script>

Now var UI, which is a module in my case, contains

edited May 23 '17 at 12:15

Community

1
1

answered Feb 29 '16 at 13:35

Bogdan M.

2,161
6
31
53

I don't think I follow – Omar A. Yousry Feb 29 '16 at 14:39
just load jquery in the index html. then require the module where you want to use jquery, then you have it, you just config your module such that it can get some arguments, and you pass jquery to it. so require jquery, require module, pass parametere like MyModule(window.$) - (we pass the jquery to the module), and then you can just use jquery under your module. – Bogdan M. Mar 01 '16 at 09:26

How do I include jQuery code in my node.js web app?

1 Answers1