Follow

Adding css and js for a Module

CSS and JS resrouces

Sometimes you don't want to add css and js resources to the entire website because it is only needed on one page of the site.

For example, the accordion is often only used on the FAQ page, so why would you want the Accordion jQuery plugin's added to the whole site? This will decrease performance.

You can load resources on a Module, and register it at the bottom of the page so that it appears after the definition for jQuery. There is an article on how to do that by Registering Javascript at the bottom of the page.

 

Run js code

You may have some js code that you only want to run when a Module is present. There are multiple ways that we can do this:

 

One

Write your js code in the Module and make sure to inject it into the bottom of the page.

This encapsulates the Module and makes it really easy to read and understand. 

I would use this method when you are just instantiating a plugin because it's simple. Id you have to write a bunch of code, maybe you want to look at another method below.

 

Two

Add a div onto the page and set the callback attribute

module.ascx
<div data-js-callback="initTabbedContent"></div>

 

In your javascript file, you can search that this exists and then run some code if you find it

base-functions.js
var called = false;
var callback = $('div[data-js-callback]').attr('data-js-callback');
 
if (typeof callback != 'undefined') {
    // type 1 of calling function that is setup on a module;
    if (callback == 'initTabbedContent') initTabbedContent();
}

 

Three

You can set up a function on the Module and then call it from the base-function.js file. This is helpful if you need to run the function on window resize - the definition for that is in base-functions.

base-function.js
// type 2 of calling function that is setup on a module;
if (typeof callModuleFunction == 'function') {
    callModuleFunction();
}

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments