Set active kendo tab

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>