Tips for selectively loading JS resources on individual pages in Grails version 2.2.4

Is there a way to selectively load certain JS resources on specific pages in Grails 2.2.4? Currently, all JS files are being loaded on every page, even if they are not needed.

The configuration in my ApplicationResources file is as follows:

modules = {
    application {
        dependsOn "jquery", "jquery-ui", "emberjs","emberjsdata", "pjax", "highchart", "filetype", "theme"
        resource url:'js/application.js'
        resource url:'js/App.js'
        resource url:'js/bootstrap-select.js'
        resource url:'js/bootstrap-switch.js'
    }

    request {
        dependsOn "application"
        resource url: 'js/request.js'
    }

    lowside {
        dependsOn "application"
        resource url:'js/lowside.js'
    }

    pjax {
        resource url: 'js/jquery.pjax.js', disposition: "head"
    }

    highchart {
        resource url: 'js/highcharts.js', disposition: "head"
    }

    filetype {
        resource url: 'js/filestyle.js', disposition: "hea…

In my layout page, I include the following:

<r:require module="application"/>
javascriptgrails

Answer №1

Grails is functioning as intended based on your current layout and resource configuration. By including the application module in your main layout page, all resources are being loaded into every GSP that is rendered. To prevent this from happening, you have a few options.

  1. If certain resources are only needed on specific pages, consider creating a module containing only the essential Javascript or CSS resources. This module should be included in the main layout. Then, for pages requiring additional unique resources, use the require tag within the head tag, similar to how it is done in the layout page. For example, if highchart is only needed on one page:


    <html>
      <head>
        ...
        <r:require module="highchart"/>
      </head>
      <body>
        ...
      </body>
    </html>

  1. If multiple pages need the same resource (but not every page in the app), consider creating layouts specifically for these groups of pages. This approach works well for pages focused on a particular feature. Using the highchart example, if you have an "Analytics" section with multiple highchart-utilizing pages, create a layout file like layouts/analytics.gsp with a structure such as:


    <html>
      <head>
        ...
        <r:require modules="common,highchart"/>
        <r:layoutResources />
        <g:layoutHead/>
      </head>
      <body>
        <g:layoutBody/>
        <r:layoutResources/>
      </body>
    </html>

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

What is the best way to capture a 403 response when making a GraphQL API call?

My server handles component rendering and generates an HTML response upon request. During the rendering process, the server initiates a GraphQL call for a specific component which sometimes results in a 403 error. Here is the code snippet: const client = ...

javascriptnode.jsreactjsexpressgraphql

Fetch image from database using Ajax when image name is clicked in CodeIgniter

I am currently working on creating a gallery using CodeIgniter. I have successfully retrieved a list of image names from the database and displayed them on the view page. Now, I would like to implement a feature where users can click on an image name and r ...

javascriptajaxdatabasecodeigniterimage-gallery

JQuery click event does not play nicely with Javascript array splice functionality

When using for loops, I noticed that array.splice doesn't seem to be working as expected. The array remains unchanged. I tried moving things around and found that it still doesn't work in Chrome. var menu =['#men','#wmen',&a ...

javascriptjqueryarrays

AngularJS substitution with regular expressions

Looking to replace specific words in HTML content within <div> and <p> tags upon page load. Utilizing angularJS to achieve this task. This is my current function: var elementsList = e.find('p'); var regex = ('[^<>\& ...

javascriptregexangularjs

Issue with Guild Member Add functionality in discord.js is not functioning as expected

I'm facing an issue with my code where the bot does not send a welcome message when a user joins, despite having everything set up correctly. Even when a user leaves, there is no farewell message being sent either. Here is the code I am using: bot.on ...

javascriptnode.jsdiscorddiscord.jsbots

The process of altering a property in input data within Vue.js

I have a component called Input.vue that displays a label and an input field of some type. Here is how it looks: <template> <div class="form-element"> <label :for="inputId" :class="['form-element-tit ...

javascriptvue.js

Despite setting the necessary Access-Control-Allow-* headers, the CORS ajax call still encounters a failure

My ajax call from a third-party-hosted script to my endpoint is encountering some issues. In Chrome, the preflight call appears as follows: GENERAL Request URL: https://my_endpoints_url Request Method: OPTIONS Status Code: 200 Remote Address: 21.188.37.1 ...

javascriptajaxgoogle-chromerequest-cancelling

Firestore Query sends data object to browser

When making a Firestore query, the browser is displaying [object Object],[object Object] instead of the expected output: router.get('/jobopportunities', async(req, res) => { var jobArray = []; const snapshot = await fireba ...

javascriptnode.jsfirebaseexpressgoogle-cloud-firestore

Insufficient Resources Error (net::ERR_INSUFFICIENT_RESOURCES) encountered while executing jQuery script with multiple ajax requests for 2 minutes

Upon initially loading the code below, everything seems to be functioning smoothly with the dayofweek and hourofday functions. However, shortly thereafter, the browser (Chrome) freezes up and displays the error message: net::ERR_INSUFFICIENT_RESOURCES. Thi ...

javascriptjqueryajaxxml

If you want to use the decorators plugin, make sure to include the 'decoratorsBeforeExport' option in your

Currently, I am utilizing Next.js along with TypeScript and attempting to integrate TypeORM into my project, like demonstrated below: @Entity() export class UserModel extends BaseEntity { @PrimaryGeneratedColumn('uuid') id: number } Unfortun ...

javascriptnode.jstypescriptbabeljsnext.js

The crossIcon on the MUI alert form won't let me close it

I am facing an issue with my snackBar and alert components from MUI. I am trying to close the alert using a function or by clicking on the crossIcon, but it's not working as expected. I have used code examples from MUI, but still can't figure out ...

javascriptcssreactjsmaterial-ui

What is the best way to modify a newly added element using jQuery?

When a user clicks a button on my screen, a new template is loaded dynamically using jQuery's .load() method. This transition adds new HTML to the page that was not present when the script initially loaded: (function($) { $('.go').on("c ...

javascriptjqueryhtmlcss

Retrieving the attribute of a clicked element in jQuery when the content is dynamically created

In the process of developing a website with AngularJS, I encountered a challenge when trying to retrieve the attribute of a dynamically generated element using jQuery. While I understood the need to utilize the .on method for click events instead of .click ...

javascriptjqueryangularjs

What is the best way to activate a modal in the parent component when a button is clicked in the child component?

Currently I have the following setup: panelHeader.vue (which is a child component) index.vue (the parent component where my main list view is) panelHeader.vue <template> <v-row> <div class="panelHeader"> ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Using AJAX to assign PHP session variables

Is there a way to update the SESSION variable named "fullname" on Page 2 without causing the page to refresh? This is my attempt using AJAX: HTML code for Page 1: <input type="text" name="fullname" id="fullname" placeholder="Full name"> <butto ...

javascriptphpjqueryajaxsession

Encountering an error message while trying to use `npm i`

I am attempting to set up the environment in order to run tests on JavaScript. I am using Windows 10 and Python 2.7. However, when I input the command 'npm -i', I receive an error message: https://i.stack.imgur.com/j2WXE.jpg To try and resolve ...

javascriptnpm

A Sinon spy allows for the use of two distinct callback signatures

const sinon = require('sinon') function testCallbacks (useFunction) { useFunction(function (req, res) { return true }) useFunction(function (err, req, res, next) { return false }) } testCallbacks() I am looking for a method ...

javascriptnode.jstestingsinon

AngularJS: dependent dropdown menus

Attempting to create a cascade dropdown in Angular, I assumed it would work seamlessly with binding. Here is the code snippet: <select name="client" ng-model="selectedRequest.client" ng-options="c.name for c in clients track by c.id" req ...

javascriptangularjs

How to save array data to a text file using node.js

I have an array containing values that I want to write to a text file using the following code. while(filedataarr.length>0) { firstelement = filedataarr.shift(); //console.log(firstelement); fs.appendFile("D:\\Temp& ...

javascriptnode.js

Detecting the Escape key when the browser's search bar is open - a step-by-step guide

One feature on my website is an editor window that can be closed using the Escape key. The functionality is implemented in JavaScript: $(document).keyup( function(e) { // Closing editor window with ESCAPE KEY if(e.which == 27) { // Clic ...

javascriptjquery