Rendering EJS templates and smoothly scrolling to a specific section on a webpage

I need to display my index page and automatically scroll down to the form section.

One way I thought of doing this is by:

app.post('/rsvp', (req, res) => {
  res.render('index/#rsvp', { errors: { email: 'Your email has already been registered'}})
}

The relevant part in my index.ejs looks like:

<section id="rsvp">
  <form name="rsvp" id="newRsvp" method="post" action="/rsvp">
    <div class="form-group">
      <% if (locals.errors.email) { %>
         <p>Please enter your email address</p>
      <% } %>
  </form>
</section>

Is there a more efficient way to achieve this using EJS?

Answer №1

When using the render method, keep in mind that the first argument should be the name of the template file.

This does not refer to the URL being visited by the browser.

The browser has already determined this and requested it from your server (which is why the initial /rsvp route is accessed).


You have several options available:

  • Modify the link so that the fragment ID is included from the start
  • Implement the P/G/R pattern to redirect from the post route to a URL that the browser GETs, with the fragment id included
  • Use client-side JavaScript to scroll the page once enough content has loaded

EJS won't directly solve this issue, but you could consider using it to selectively include the client-side JavaScript mentioned above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to send decimal values from a view to a controller using Vue.js?

I am encountering an issue when trying to pass decimal values from the view to the controller using Vue.js. Only decimal values seem to be arriving as NULL, while integer or string values work fine. Below is the code snippet: salvarProdutos: function ( ...

What could be the reason for why get/post methods are causing Unauthorized (401) errors?

My project involves both a log-in and sign-up feature. For the sign-up part, I utilized Express-Validator, while for the log-in part, I integrated Passport.JS. However, when I added the passport JS declaration in app.js, it resulted in an Unauthorized erro ...

What is the best way to manage the parameter in a route?

I set up a few routes : var express = require('express'); var router = express.Router(); router.post('/isAccessible/:orgaId', function(req, res, next) { res.send("------ param = "+orgaId); }); module.exports = router; Next, in a ...

What is the best method to position a modal in the exact center of the screen?

Is there a way to position the modal at the center of the screen? I have tried implementing this HTML and JavaScript code. Interestingly, it works fine in Chrome console but fails when I try to refresh the page. $('.modal').css('top', ...

Comparing the Distinctions of jQuery Post and HTML Form Post

After researching extensively, I am still confused about the difference between a Jquery $.post method and submitting an HTML form using post. Here is my code for the jQuery implementation: $.post( "/test", query , function( data ) { console.log(data) ...

Steps to resolve background image problems

Currently encountering issues with the application where the background image is not showing up behind the login form. This problem arises while using a bootstrap template for the website. Attempted to set the background image in the .main-content div with ...

javascript string assignment

Is it possible to conditionally assign a string based on the result of a certain condition, but for some reason, it's not working? var message = ""; if (true) { message += "true"; } else { message += "false" } console.log(message); ...

Mastering the use of node cluster mode in conjunction with agenda cronjobs

Currently, I am utilizing nodejs and agenda to run cronjobs. With a total of 10 cronjobs in place, the process is taking longer as nodejs is single-threaded and they all run simultaneously. In an attempt to resolve this issue, I experimented with pm2 by e ...

Executing functions across modules in node.js

I need assistance with two of my modules: var client = require('./handlers/client.js'); var server = require('./handlers/server.js'); server.createClient() The client module: var client = function(){ console.log("New client"); ...

Secure your Express.js session cookies for enhanced protection

Struggling to figure out how to set a secure cookie in the expressjs framework. Any suggestions on where I can find an option for this? ...

send another response following the completion of the request.end()

I am facing challenges with writing the correct callback function. The situation involves a user making a request to "/city", which then triggers the server to make a request to a third-party service for data retrieval using http.request(). I successfully ...

When the collapse button is clicked, I aim to increase the top value by 100. Subsequently, upon a second click, the top value should

https://i.stack.imgur.com/p9owU.jpghttps://i.stack.imgur.com/Kwtnh.jpg I attempted to utilize jQuery toggle, but unfortunately, it is not functioning as expected. <script> $(document).ready(function () { $(".sidebar ul li&quo ...

What is the process of implementing FFT in node.js?

Struggling with implementing FFT in node.js is proving to be quite challenging for me at the moment. Despite experimenting with three different libraries, I find them all poorly documented, which only adds to the complexity of the task. My current setup i ...

Encountering problems when attempting to effectively filter a list of products using data

<div id="prod"> <div class="content" data-brand="Andrew" data-price="1000" data-store="JCPenny">Andrew</div><br /> <div class="content" data-brand="Hill" d ...

Issues with Cross-origin resource sharing (CORS) arise when attempting to delete data using Angular

I am facing an issue with my Angular app (v1.13.15) and Express.js(v4.12.4) backend. Specifically, I have set up a DELETE method in my backend and enabled CORS support for it. However, every time I attempt to use the Angular $http.delete function, I enco ...

Is anyone else experiencing differences in the appearance of my mega menu between Safari, Firefox, and Chrome? It seems like

When viewing in Safari, the text overlaps for some reason. It works fine on Firefox and Chrome. Here's a screenshot of the issue: Safari: https://i.stack.imgur.com/hf7v2.png Firefox: https://i.stack.imgur.com/NrOOe.png Please use Safari to test th ...

Gulp encountered an issue - Module 'sigmund' not found

After installing browser-sync, my previously working Gulp encountered an error: Error: Cannot find module 'lru-cache' To resolve this issue, I utilized the following solution: npm link lru-cache as suggested in this thread However, upon atte ...

Clicking on a specific month results in displaying only one row from the database rather than showing all rows associated with that particular month

I am facing an issue with my calendar feature on the website. The problem is that when I click on a specific month, it should display all the data associated with that particular month. However, the current code does not seem to work as expected. For insta ...

Loading of local resources is restricted in the Apache web server

I am encountering an issue with my Apache web server on a Raspberry Pi. I need to display graphs using the MPLD3 libraries, which are loaded from the server's folder. When I run my index.php page, I receive a Not allowed to load local resources error ...

Issue: angular2-cookies/core.js file could not be found in my Angular2 ASP.NET Core application

After spending 2 hours searching for the source of my error, I have decided to seek help here. The error message I am encountering is: "angular2-cookies/core.js not found" I have already installed angular2-cookie correctly using npm. Below is the code ...