Include a class for CSS styling in EJS using Node.js

Attention: Please be aware of the environment in this Application. The following technologies are being used:

  1. Windows
  2. NPM, Express
  3. MySQL

This is the code in an ejs template called example.ejs

<% if (message) { %>
                <p class="alert " id="errorMessage">
                    <%= message %>
                </p>
            <% } %>

I am trying to add a class to the p element.

This is what I have attempted so far but it hasn't worked.

messages = "Password Successfully Changed";
jQuery('#errorMessage').addClass('successMessage');
res.render('profile',{page_title:"My Profile",data:rows,message: messages});

Answer №1

The solution has been discovered.

const data = {
  response : "Password Changed Successfully",
  messageType : "successMessage"
};
res.render('profile',{page_title:"My Profile",data:rows,message: data });

Next, on the template side.

<% if (globalMessage) { %>
    <p class="alert <%= globalMessage.messageType %>" id="errorMessage">
       <%= globalMessage.response %>
    </p>
<% } %>

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

Swap out a module with a different one in a node.js environment

In the scenario where a node.js application consists of numerous files referencing a particular module (like underscore), and there is a need to replace that module with another (such as lodash), the typical approach involves globally replacing the names a ...

Encountering trouble installing Angular CLI on MacOS High Sierra version 10.13.2

I am encountering an issue while trying to install Angular CLI. I have successfully installed the latest NodeJs version 8.9.4 and npm version 5.6.0. However, when I attempt to run the command npm install -g @angular/cli, I receive the following error messa ...

Node.js application abruptly halts without warning

I am currently working on a script to parse bitcoin blockchains using an asynchronous queue function from a popular library. However, I have encountered an issue where the code seems to stop without any error message during processing. What could be causin ...

Utilizing express-session and passport to initiate a new session for each request

Currently working on developing an e-commerce platform, both front and back-end. Using express and passport for a basic login/register system. The issue I'm facing is that every time a page with a request is accessed, a new session is created and stor ...

I am trying to collapse the table header but I am having trouble doing so

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); body { bac ...

React Images: Carousel display issue with images not centered

Is there a way to center the selected image instead of it appearing on the left-hand side? Here is the current behavior: https://i.stack.imgur.com/SUWOK.jpg I am using the following packages in a sandbox environment with Next.js 11 and TailwindCSS 2.2.4: ...

Sophisticated method in JavaScript to conceal and reveal div elements

My knowledge of front-end web development is strongest in HTML and CSS, but when it comes to JavaScript, I feel like there must be a more efficient way to achieve the functionality I want. On my website, I have a set of <li> items that, when clicked ...

A guide on extracting/filtering information from JSON files using JavaScript

Is it possible to extract specific data from a JSON file using JavaScript? I have imported a JSON file into my local JavaScript and I am having difficulty in retrieving and displaying certain information. Could someone offer assistance with this? The JS ...

npm pack is taking an unusually long time to complete

I'm currently using npm version 5.6.0 and when running the command npm pack -ddd, which enables maximum verbosity, I am experiencing extremely long wait times. It seems to hang during the prepack phase, possibly due to the tar zip bundledDependencies ...

Having issues with my JavaScript timer - seeking assistance in troubleshooting the problem

Trying to set a timer for my little game, but facing some difficulties. The timer causes the balance to randomly increase from 0 to 13000 + some extra amount. <script> var coins = 0; var speed = 1; </script> <center> <h4> ...

Replacing default hover behavior from an external library

Currently, I am utilizing a JS library that comes with a specific widget. Basically, I have the following list (I removed unnecessary DOM code): <li class="disabled"> When I hover over this list item, it turns into: <li class="disabled state-a ...

Enhancing a specific element in a view using Node.js alongside Express and EJS

My goal is to modify value2 on the server side and update the view accordingly. The question at hand is: How can I efficiently refresh the view with only the new value2? Server: var express = require("express"); var app = express(); app.set('view ...

Use two queries to apply filters to entries in NextJS

Greetings to all! I am currently working on a project in NextJS that involves showcasing a portfolio of works generated from JSON data. [ { "title": "WordPress Plugin for Yandex Recommender Widget", "image" ...

Height of the image is being boosted while the width remains consistent

When working on a responsive page layout, I encountered an issue with increasing the height of an image while keeping the width constant. Modifying the width of the image reflects changes, but adjusting the height does not seem to make any difference. I t ...

React Container failing to Re-Render despite Redux State Change

I have encountered an issue while working on Redux and React. I am developing a book list where clicking on a book will display its details. Upon selecting a book, the action is properly handled and the state is updated as expected. // reducer_active_boo ...

revealing the hidden message on the back of the card

I have been working on creating flipping cards for my website using CSS, but I am facing an issue. Even after styling my cards as per the provided CSS code, I am unable to make them flip when I hover my mouse over them. .row { padding-top: 25px; } .c ...

Unexpected issue encountered while compiling using webpack

My project was running smoothly until I encountered a compiling error in each pug file... Version: webpack 1.15.0 Time: 51793ms Asset Size Chunks Chunk Names app.bundle.js 953 kB 0 [emitted] app p ...

Issues with Gulp Autoprefixer Functionality

I'm struggling to make Autoprefixer work with Gulp. Despite using opacity, gradients, and transforms in my CSS, I can't see any vendor prefixes being added. However, everything else seems to be functioning correctly. Below is my gulp file: var ...

Storing a function value in a variable within a Node.js server to retrieve folder size

I have been searching for a way to determine the size of a folder's contents and discovered that using the get-folder-size package is the best option. The code snippet below explains how to achieve this: const express = require('express'); ...

JavaScript-based tool for extracting content from Sketch file

My goal is to extract the contents of a .sketch file. I have a file named myfile.sketch. When I rename the file extension to myfile.zip and extract it in Finder, I can see the files inside. However, when I try the same process on the server using Node.js ...