Javascript

By default, Mura sites need to include "global.js" and jQuery or prototype/scriptaculous javascript libraries. jQuery is the default but if you can use prototype/scriptaculous by editing /[siteid]/includes/contentRenderer.cfc and changing line 46:

<cfset this.jslib="jquery"/>

to

<cfset this.jslib=""/>

Note: Some Content Objects (Local Index Slideshow, for instance) have their own Javascript that will be passed in dynamically by Mura using the htmlHeadQueue, if and only if, a Content Object that requires it is placed on a page. If you’d like to manually place all necessary javascript into the head of your template, you can bypass this behavior by following the steps below:

  1. Edit {siteID}/includes/contentRenderer.cfc
  2. Set the following to true: <cfset this.jsLibLoaded=”true”> (line 54)

Using the htmlHeadQueue to load Javascript (or anything else) dynamically

To use the htmlHeadQueue to dynamically load Javascript (or CSS or anything else you need loaded dynamically) you simply need to do the following. This is most often done within the context of adding a custom object in Mura that requires very specific assets and code to allow it to function.

1. In your main object file (/display_objects/custom/myCustomObject/index.cfm or a Component template, for example) you’ll need to initiate the Javascript library and tell Mura where to find the items to be loaded into your document <head>:

<cfset $.loadJSLib() /> <!--- Load your default JS library --->
<cfset $.addToHTMLHeadQueue("custom/fabtabulous/htmlhead.cfm")> <!--- Load additional items  --->


2. Create the aforementioned htmlhead.cfm. This file places the calls to your javascript and CSS into the <head> of your page dynamically. You can use actual code here or link to files as we do:

<cfoutput>
<script src="#$.siteConfig('assetPath')#/includes/display_objects/custom/myCustomObject/js/custom.js" type="text/javascript"></script>
<link rel="stylesheet" href="#$.siteConfig('assetPath')#/includes/display_objects/custom/myCustomObject/css/custom.css" type="text/css" media="all">
</cfoutput>

3. You would then add any markup or business logic to your main object file (index.cfm, for example) and apply the object to a page in Mura. 

Using the htmlFootQueue

Alternatively, you can load Javascript or anything else you desire dynamically to the foot of the document, that is to say immediately before the final closing </body> tag of your template. For example:

<cfset $.addToHTMLFootQueue("custom/fabtabulous/htmlhead.cfm")> <