Using JavaScript

There are essentially two ways to use JavaScript in Mura CMS:

1. Dynamically, using Mura's $.addToHTMLHeadQueue(), $.addToHTMLFootQueue() method, or
2. Statically, by simply adding it to your layout templates.

HTMLHeadQueue & HTMLFootQueue

Mura provides methods that allow you to add a .cfm file to either the head section, or just before the closing body tag of a generated HTML page.

The main purpose of these methods is to reduce duplicate code. For example, if you wish to dynamically add some JavaScript to the head portion of the document, using these methods would only add the script the first time it was added, and any subsequent requests to add the file to the queue would be ignored.

Syntax

<cfscript>
// to add content to the head section of a generated HTML page
$.addToHTMLHeadQueue(
'/path/to/yourFile.cfm'
);
// to add content prior to the closing body tag of a generated HTML page
$.addToHTMLFootQueue(
'/path/to/yourFile.cfm'
);
</cfscript>

File Content

This is an example of the content you could have in the file:

<cfoutput>
<script src="#$.siteConfig('themeAssetPath')#/display_objects/myScripts.js"></script>
</cfoutput>

Lookup Hierarchy

1. {context}/{SiteID}/includes/themes/{theme}/display_objects/htmlhead/{targetFilePath}
2. {context}/{SiteID}/includes/display_objects/htmlhead/{targetFilePath}
3. {context}/{SiteID}/includes/themes/{theme}/display_objects/{targetFilePath}
4. {context}/{SiteID}/includes/{targetFilePath}
5. {targetFilePath}
6. {context}/{SiteID}/includes/display_objects/{targetFilePath}
7. {context}/{SiteID}/includes/{targetFilePath}
8. {context}/plugins/{targetFilePath}

Loading JavaScript Statically

To load JavaScript statically, simply add your scripts directly to your layout templates. 

jQuery

If you wish to include jQuery statically, because you know you will need it often, you can tell Mura that you you're doing this by editing the Site or Theme contentRenderer.cfc and setting this.jsLibLoaded=true. This will ensure Mura will not load jQuery again in addition to the one you will add manually for your templates.