jQuery Methods in Node.js

Question

Just started coding in node.js . I made a few pages (login,signup,blog etc).

If I want an effect where : 1. I hover over the "News" button, a slider appears down,

To modify image in an ejs tag ( eg. <% blog.image %>) (I don't think I'll be able to use css here).
To do something if the user clicks a button (or any other event).
Right now in my project, if user clicks on "Login", it takes him to the "/login" page. I googled "popup login form", most tutorials are for jQuery.
While using jQuery, it gives an error : "jQuery requires a window", so I used jsdom, but shifted to cheerio (many users recommended it). I browsed the doc, but couldn't find a "click" event method. How can I accomplish the above mentioned tasks?

Note : I'm not asking for specific code for the above tasks. I've done these in front-end with jQuery. I just want to know how to get started with jQuery in node.js .

Answer 1

Here you have used Node js as a webserver and it is only responsible for serving you with what you are asking. from pages to static assets includes images, fonts, css and even js files.

When you want a user to login for example you have configured your index page to have a "login" link which brings him to a /login route:

app.get('/', function(req, res){
  res.render('index', { title: 'home' });
});

index.ejs

<!DOCTYPE html>
<head>
  <title><%= title %></title>
</head>
<html>
  <body>
    <a class="btn" href="/login">LOGIN</a>
  </body>
</html>

Now when you do a request to http://yourdoamin.com/ node will serve you with this index page. But this page is a simple page no styling nor scripting but you want to interact with your page using jQuery. so lets configure node to also serve jQuery with our index page:

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

and make public folder with stylings and scripts that you want:

/public
  /css
    bootstrap.css
    myStyles.css
  /js
    jQuery.js
    bootstrap.js
    myScripts.js
  /images
  /fonts

And include this styles and scripts with your index.ejs :

<!DOCTYPE html>
<head>
  <title><%= title %></title>
  <link rel="stylesheet" href="/css/bootstap.css">
  <link rel="stylesheet" href="/css/myStyles.css">
</head>
<html>
  <body>
    <a class="btn" href="/login">LOGIN</a>
    <!-- scripts -->
    <script src="/js/jQuery.js"></script>
    <script src="/js/myScripts.js"></script>
  </body>
</html>

Now when i do a request to http://yourdoamin.com/ with index page, node will also serve jQuery to client-side because it knows how to serve static assets. ( although you could use a cdn in place of jquery static file )

Now you could use jQuery on your clinet-side code, for example when a user clicks "login" the Default behaviour is to go to "/login" page which serves by backend node but now you could prevent it from client-side and show them a popup (modal or dialog) login form ( here i've used bootstrap modals ):

myScripts.js

$('.btn').click(function(event) {
  event.preventDefault();
  var modalTemplate = $('#modalTemplate').html();
  $('#modal').html(modalTemplate);
  $('#modal').modal('show');
});

index.ejs

<!DOCTYPE html>
<head>
  <title><%= title %></title>
  <link rel="stylesheet" href="/css/bootstap.css">
  <link rel="stylesheet" href="/css/myStyles.css">
</head>
<html>
  <body>
    <div id="#modal" class="modal fade"></div>
    <a class="btn" href="/login">LOGIN</a>

    <!-- scripts -->
    <script src="/js/jQuery.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/myScripts.js"></script>

    <!-- client-side tempates -->
    <script type="text/template" id="modalTemplate">
      <div class="modal-dialog">
        .
        <!-- look into bootstrap documentation -->
        .
      </div>
    <script>
  </body>
</html>

These are the priciples of Progressive enhancement . as you could see when one clicks "login" we send them to login page but if they have a modern browser (enabled javascript) we show them a modal login form.

Here we done all our client-side coding manually. your myScripts.js file gets bigger and bigger and also your client side templates. thats why out there is Angular , Ember and other client-side frameworks and tools like backbone , react , ...

jQuery Methods in Node.js

Question

1 answers

solution1
2 ACCPTED 2017-01-22 13:28:20

jQuery Methods in Node.js

Question

1 answers

solution1 2 ACCPTED 2017-01-22 13:28:20

solution1
2 ACCPTED 2017-01-22 13:28:20