Accessing JavaScript file on various endpoints

Currently, I am developing a large javascript application which functions as a single page application. My technology stack includes node.js with jade. I have some concerns regarding the loading of javascript files for the front end.

Let's say we have the following pages:

- profile
- dashboard
- setting

Should I only load profile.js when the user visits the profile page? Each page is a child of a layout.html containing the header and footer. Loading all scripts on the home page would make it too bulky.

However, I'm not sure if placing my javascript at the bottom of each html file is the right approach. The same applies to my css files. Would appreciate any insights on this matter!

javascriptjqueryhtmlcssnode.js

Answer №1

document.querySelector("button").addEventListener('click', function (event) {
  if (!document.head.querySelector(".angular-script")) { // Angular is not added yet
    var s = document.createElement('script');
    s.src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js";
    s.className = "angular-script";
    document.head.appendChild(s);
  }
});
<button>Load angular</button>

<span ng-app>{{1 + 2 + 3}}</span>

However, my inquiry pertains to whether it is correct to include my javascript at the bottom of each html file, along with my css file.

  1. Oftentimes, script in html does not get executed. jQuery performs this task for you, but I still believe that it may not be an ideal approach.

  2. You seem to be loading the same script multiple times. It would be better to load the script for each page only once.

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

Connecting mysql workbench data using html: A step-by-step guide

I'm currently creating a user interface for a database system using HTML. I'm a bit stuck on how to access and manipulate the database in MySQL Workbench. Does anyone have any suggestions or sample code that could help me connect them? Thanks! ...

htmldatabasewebmysql-workbenchconnector

Node.js user update complete

I am currently working on enabling users to edit their profiles. However, the code I have set up does not seem to be functioning as expected. The form I am using looks like this: <form action="/dashboard/users/edit/:id" method="put"> And my route ...

javascriptnode.jsexpress

Leverage AJAX with jQuery to dynamically load content onto the page post-page load

I'm looking for some assistance with a particular issue. Let's say I need to load controls for various items on the page after it has finished loading. For example: Object 1 <div id="controls1" class="controls" item_id="1"></div> ...

jqueryajax

Using Ajax and jQuery to Retrieve the Value of a Single Tag Instead of an Entire Page

Let's say I have a webpage named page.html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Page</title> </head> <body> <h1>Hello World!!</h1> </body> </html> Now ...

javascriptjqueryajaxhtml

Models reference each other incorrectly, causing a problem of circular dependencies

file-admin.ts import mongoose, { Schema, Document } from 'mongoose'; import UserRole, { IUserRole } from './user-role.model'; export interface IFileAdmin extends Document { role: IUserRole; } let fileAdminSchema = new Schema<IF ...

node.jstypescriptmongodbmongoosetypegoose

What are the steps to integrate mailjet into my Vue application?

I am looking to utilize mailjet for my contact form. I have installed it using "$ yarn add node-mailjet" and followed the steps provided. However, I am a bit confused about whether I am integrating mailjet correctly. Below is the code I am currently using: ...

javascriptvue.jsmailjet

Creating a Footer with React and Material-UI: Step-by-step Tutorial

I'm facing an issue with the footer on my webpage. Here are my requirements: It should always be positioned at the bottom after the page content If there isn't enough content to fill the page, it should still stick to the bottom of the screen I ...

cssreactjsmaterial-uifooter

What is the proper way to add a line break within a Custom JSX Tag that is imported from a different class in the code

<Experience startYear={2019} endYear={2019} jobName="First Job" jobDescription="1. Providing API calls support for Headless CMS. 2. Provide escalated ticket/incident management support" ...

javascriptnode.jsreactjsjsx

How come this straightforward VueJS component template is appearing in the wrong location in the DOM, positioned above a table?

These illustrative examples are not the actual faulty code, but rather simplified for discussion purposes. Issue with Code The code snippet below displays a table, but unexpectedly places the Component values above the table element visually and in the D ...

htmlvue.js

The Discord.js command outright declines to function

I'm having trouble with a code that I'm working on. The goal is to create a command that is enabled by default, but once a user uses it, it should be disabled for that user. However, when I try to execute the code, it doesn't work at all and ...

javascriptdiscord.js

The process of increasing value through a function in PHP

Looking to create a function that increments a variable when a button is clicked. I have 4 buttons: farm, cave, house, casino The goal is to accumulate the random numbers generated by each button and add them up in the "YOUR GOLD" section. For example, c ...

phphtmlcss

Using React App to Retrieve Environment Variables from Google Cloud Run

I've set up Cloud Run environment variables for my React App deployment on Google Cloud Run. https://i.sstatic.net/zxy3J.png However, when I attempt to access these variables in the react app as shown below, they return "undefined" values: export co ...

node.jsreactjsenvironment-variablesgoogle-cloud-run

automatically collapse a submenu once a different menu option is selected

After doing some research and trying out various solutions, I still couldn't get it to work. I made adjustments to my dropdown menu and click function so that each submenu opens and closes when its parent is clicked. However, I'm now looking to f ...

javascripthtmlcssreactjsnext.js

Creating dynamic properties in a JavaScript object literal is a great way to customize

I am encountering an issue where I am trying to define input values from an HTML page as properties of a JavaScript Literal object, but I keep getting an error stating Undefined when I try to access it in the JS file. For example, if I have an input value ...

javascriptjqueryhtml

How can I parse URL paths in jQuery for ASP.NET?

I want to incorporate "~/" and have it resolved on the client side. Here is an example of what I am trying to do: <a href="~/page.aspx">website link</a> <img src="~/page.aspx" /> In my ASP.NET code, I have my base URLs set up like this ...

asp.netjavascriptjquery

Inexplicably bizarre HTML glitch

I am currently utilizing a comment system that involves adding a new row to a SQL database. The system seems to be working fine; however, when I try to display the comments, the formatting of the comment div becomes all jumbled up. You can view the page wh ...

phpsqlcsshtml

Strategies for breaking down and streamlining Drag-And-Drop code into more manageable sections

Upon experimenting with react-beautiful-dnd, I developed a prototype drag & drop functional component. However, I find the code quite lengthy (around 250 lines) and believe it could be structured better. You can view this example on this sandbox. I am see ...

javascriptreactjsrefactoringreact-beautiful-dnd

What is the quickest way to change an HTML element as soon as it finishes loading?

Is there a way to modify an element as soon as it is created, without relying on the $(document).ready() function which can be inefficient when a page fails to load completely or loads slowly? Some delay is acceptable, but not if it takes multiple seconds ...

javascriptjqueryhtmlfirefoxgreasemonkey

Create a cookie for a specific domain instead of a subdomain in NodeJS and ExpressJS

For managing sessions, I have been utilizing expressjs and mongostore. Below is the code snippet that configures the store in expressjs: app.configure(function(){ app.use(express.session({ secret: conf.secret, maxAge: new Date(Date.now ...

cookiesnode.jsexpresssession-cookies

The jQuery toggle feature has the ability to switch back to its default state automatically

I am faced with a puzzling situation involving two similar pieces of code: <div class="favButtonHolder" alt="{% url inturl int.id %}"> {% if int in user.get_profile.favorites.all %} <div class="favorite favButton" style="disp ...

djangojquery