Stack jquery in expressJs

Question

I'm looking for a way to stack jquery from the express app.js file.
Maybe this is not possible but I need to use jquery in the app.js which modifies the html file.

Example:

app.js

const express = require('express')
const app = express()
const $ = global.jQuery = require( 'jquery' );

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname+'/index.html'));
  $("#click").click(function(e){
        console.log('click');   
    }) 
})

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

index.html

<!doctype html>
<html>
<head>
  <title>Express - Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body> 
    <button id="click" type="button">Click</button>
</body>
</html>

Maybe I'm using the wrong method...
If someone has already done this

This is not possible. What are you trying to accomplish here? — goto
– goto, Commented Feb 15, 2020 at 18:19
@goto1 It's a bit long to explain, basically, I would like to use the twitter API (from app.js) and inject the results into the html file using jquery — atmon3r
– atmon3r, Commented Feb 15, 2020 at 18:23
Then I suggest creating a separate route in your app.js that calls the Twitter API and returns the data as JSON. Then in your index.html you can use jQuery to make an AJAX request to grab that data. Another option would be to use a template engine, such as ejs and then use the res.render method to pass data you need/get from the Twitter API. — goto
– goto, Commented Feb 15, 2020 at 18:25
Effectively! It may be a solution ... I will inquire about this rating there — atmon3r
– atmon3r, Commented Feb 15, 2020 at 18:28

David · Accepted Answer · 2020-02-15 18:20:07Z

1

This code belongs client side, not server side:

$("#click").click(function(e){
    console.log('click');   
})

You'd put it in your index.html. (Or in an external script referenced by your index.html.) For example:

<!doctype html>
<html>
<head>
  <title>Express - Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body> 
    <button id="click" type="button">Click</button>
</body>
<script type="text/javascript">
    $("#click").click(function(e){
        console.log('click');
    });
</script>
</html>

The server-side code has no concept of the in-browser DOM. It's just returning the page to the client as a response to the HTTP request it received. The client-side JavaScript on that page is what interacts with the DOM in the browser.

answered Feb 15, 2020 at 18:20

David

221k42 gold badges245 silver badges337 bronze badges

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

3 Comments

atmon3r Over a year ago

That's what I thought! I use the API in the app.js, obviously, I cannot use my API keys in the html file. Pity! I will try with another framework

David Over a year ago

@Julien: You might be looking for some kind of node/express template engine to bind data values to a page template. Another option could be to separate this action entirely. Your client-side page could make a separate AJAX request to another server-side route which queries the external API and returns just the data as JSON. Then the client-side code can use jQuery to populate the page with that data, if you're set on using jQuery.

atmon3r Over a year ago

Effectively! I think that's what I'm going to have to do. To go further in the explanation, I created a desktop app with electron which analyzes the stream of tweeter and brings the result to Vis.js Network The concern is that I cannot distribute software with my API keys inside, that is why I want to try to adapt it with express. I think you put me on the right track!

Collectives™ on Stack Overflow

Stack jquery in expressJs

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related