I should have known better, but I had forgot that you can't use a zero as an index when constructing a ColdFusion array. On this blog, I have 14 different themes, and 39 settings for each theme, and created an array stored in the application scope to store the values in. I wanted to use a zero as an index to identify the name of the theme, and then use 1 through 39 as the theme setting. However, when I tried this approach I received the following error: "A scalar value of type java.lang.String cannot be assigned to a 2-dimensional ColdFusion array." The problem was solved when I used 1 instead of 0 as the first index. I have always thought that this was odd as assigning a zero index shouldwork. Most other languages default to a zero on the first array item, and still mistakenly assumed that this would work here. Here was my original code that caused this error:

<!--- Theme --->
<cfset application.arrThemeSettingsFromIniStore[1][0] = "black"><!--- black --->
<!--- Theme variables --->
<cfset application.arrThemeSettingsFromIniStore[1][1] = trim(getSettingsByTheme('black').useCustomTheme)><!--- useCustomTheme --->
more custom theme settings...

The code should not use a zero based index like so:

<!--- Theme --->
<cfset application.arrThemeSettingsFromIniStore[1][1] = "black"><!--- black --->
<!--- Theme variables --->
<cfset application.arrThemeSettingsFromIniStore[1][2] = trim(getSettingsByTheme('black').useCustomTheme)><!--- useCustomTheme --->
more custom theme settings...

Late at night, I put a function inside a .cfm template and tried to consume it from Ajax, but I received a json parse error that was displayed in Chrome's console when trying to invoke a function within a .cfm page. I had forgot that ajax functions should not be consuming a .cfm page, and placed the exact same function within a component with a .cfc extension, and the issue went away. When a function is within a component with the access remote argument, ColdFusion will autogenerate a web services stub, but it does not do this within a .cfm page. If you receive a json parse error using logic that is known to create a valid json object within a .cfm page, try putting the same code in a .cfc component and consume it there. It may solve this parse error for you as well. The code below has a 'proxyControllerUrl' variable that was initially using a template with a .cfm extension, and it failed. However, when I put the same function within a .cfc extension, it worked.

function getAllThemeSettingsFromIniStore(themeId){

	// Get all of the theme properties stored in the ini configuration file.
	$.ajax({
		type: "get",
		url: "<cfoutput>#application.proxyControllerUrl#?</cfoutput>method=getAllThemeSettingsFromIniStore",//Works with a .cfc component, fails when the method is inside a .cfm template.
		data: { // method and the arguments
			themeId: themeId
		},
		dataType: "json",
		cache: false,
		success: function (data){
			// Pass the data to the getAllThemeSettingsResult function. 
			getAllThemeSettingsResult(data);
		},
		error: function(xhr, textStatus, error){
			console.log(xhr.statusText);//Parse error shows up here when inside a .cfm template. 
			console.log(textStatus);
			console.log(error);
		}
	});
}//... function

There are two standard ways to activate a Kendo tab: 1) via Javascript, or 2) appending the k-state-active class to the HTML list. Both approaches are useful. However, I have had troubles using a javascript function to set the active tab when I had a button open up a new Kendo window, and then set the active tab based upon the URL variable that I sent along when opening up the Kendo window. For some odd reason, when I used the javascript method it would not process the scripts in the second tab. I could not figure out how, or even why, this method failed, but appending the k-state-active class to set the to tab worked just fine. I will share both options below. Option 1, use javascript and the select(tabIndex) method:

// Set the active tab if it was passed into the URL.
var tabName = <cfoutput>'#URL.tabName#'</cfoutput>
// Set the active tab if the tab argument is not a null string
if (tabName !=''){
	// Set the tab
	setContractDetailTab(tabName);
}
	
// function to select the appropriate detail tab.
function setContractDetailTab(tabName){
		
	if (tabName == 'contractDetail'){
		// Get the index. We are starting at 0, so the first tab will have a zero index.
			var tabIndex = 0;
		} else if (tabName == 'routing'){
			var tabIndex = 1;
		} else if (tabName == 'attachment'){
			var tabIndex = 2;
		}
		
		// Don't perform any actions until the dom is loaded.
		$(document).ready(function() {
			// Get a reference to the tab.
			var detailTabSrip = $("#detailTabSrip").kendoTabStrip().data("kendoTabStrip");
			// Select the tab. Make sure to use a timeout otherwise an error will occur and the kendo dropdowns will not be instantiated.
			setTimeout(function() {
				detailTabSrip.select(tabIndex);
			}, 500);
			 
		});	//document.ready
	}
}

Option 2) use the k-state-active Kendo class to select the active tab:

<div id="detailTabSrip" style="height:925px">
    <!--- Tab names. --->
    <ul>
        <li id="contractDetail" <cfif not isDefined("URL.tabName") or URL.tabName eq "">class="k-state-active"</cfif>>
        	<p>Contract Detail</p>
        </li>
        <li id="routing" <cfif isDefined("URL.tabName") and URL.tabName eq 'routing'>class="k-state-active"</cfif>>
        	<p>Routing</p>
        </li>
        <li id="attachment" <cfif isDefined("URL.tabName") and URL.tabName eq 'attachment'>class="k-state-active"</cfif>
            <p>Attachment</p>
        </li>         
    </ul>
</div>

I use the imagesLoaded javascript library to determine when and what images are loaded and to provide a status on a pre-loader status screen. The imagesLoaded library has the ability to gather information on background images, and non-background images using the 'background: true/false' argument. If you need to get both background and non-background images, just run it twice switching the background arguments. I highly recommend using this library when you want to provide a 'please wait' dialog and show the load progress of a graphically intense site.

// Get the parallax images (non-background images).
$('.images').imagesLoaded({
	background: false
}).progress( function( instance, image ) {
	loadProgress();
});

// Get the background images in the scenes.
$('.bcg').imagesLoaded({
	background: true
}).progress( function( instance, image ) {
	loadProgress();
});