ColdFusion & Breadcrumbs

Working with a client that wanted to implement bread crumb navigation on application along with some other navigational menus. I hadn’t had much experience with bread crumbs, actually I have no experience with it at all, so I did the ‘search Google’ thing looking for code examples. There were several that looked promising like this one JavaScript location script that would grab the url from the href and then pull the title of the page from out of the title tag of the page. Got it working except for one thing I over looked before I started down this path. All of the pages on the site are hard coded in the title tag to display the name of the company and the trade mark symbol. So this does me absolutely no good considering all the bread crumbs would appear “Some Company Name ™”.

Like seriously… who does this anymore? I thought we were all on the dynamically name your title tags band wagon now a days. Guess someone missed the memo. After slamming my head into the desk multiple times, I decided to use JQuery’s magical goodness and all would be right with the world. I used JQuery to intercept any anchor tags throughout the application if clicked. The code below intercepts any <a href> hyper link on the site, prevents the default behavior of the <a href> tag and allows me to grab the URL and the text of the link to store in a session variable. Then upon loading of any sub pages be low my main level of navigation pages I can then parse the session variable and construct a nice and neat bread crumb trail.

JQuery code added to bottom of application pages via a cfinclude – footer.cfm

<code>

<script>
$.ajax({
type:’post’,
datatype:’json’,
url:’/main.cfc?method=getCrumb&currentPage=’ + currentPage + ‘&returnformat=json’,
success: function(data){
var pData = $.parseJSON(data);

if (!$.isEmptyObject(pData)) {

var pTitle = Array();
var pURL = Array();
pTitle = pData.PAGETITLE.split(“|”);
pURL = pData.PAGEURL.split(“|”);

$.each(pTitle, function(i, a){
liEle = $(document.createElement(‘li’));
liEle.attr({‘class’ : ‘breadcrumbs’});
aEle = $(document.createElement(‘a’));
aEle.attr({‘href’:pURL[i],’id’ : ‘anchorCrumb’,’class’ : ‘breadcrumbs’}).text(pTitle[i]);
//This is the added click event handler function
aEle.click(function(event){
event.preventDefault();
var linktext = $(this).text();
var linkURL = $(this).attr(“href”);

$.ajax({
type:’post’,
datatype:’json’,
url:’/main.cfc?method=setCrumb&pageTitle=’+linktext+’&pageURL=’+linkURL+’&returnformat=json’,
success: function(data){
$(location).attr(‘href’,linkURL);
}
});
});
aEle.appendTo(liEle.appendTo(‘#crumbList’));
});
}
}
});

/*
Intercept any links on the page and use the information to
build the breadcrumb trail manually in the SESSION.crumbBox
then pass the user on to the target page.
*/
$(‘a’).click(function (event) {
event.preventDefault();
var linktext = $(this).text()
var linkURL = $(this).attr(“href”);

$.ajax({
type:’post’,
datatype:’json’,
url:’/main.cfc?method=setCrumb&pageTitle=’+linktext+’&pageURL=’+linkURL+’&returnformat=json’,
success: function(data){
//After the AJax call is successful, proceed to the URL that was clicked.
$(location).attr(‘href’,linkURL);
}
});

}

});
</script>

</code>

This is the cfc that manipulates the session variable.

<code>

<cfcomponent>

<cffunction name=”init” access=”remote”>
<cfreturn this>
</cffunction>

<cffunction name=”setCrumb” access=”remote” returntype=”any”>
<cfargument name=”pageTitle” default=”No Title For Page Found”/>
<cfargument name=”pageURL” default=”/index.cfm”/>
<cfargument name=”resetFlag” default=”0″/>

<cfif len(ARGUMENTS.pageTitle) GT 30>
<cfset ARGUMENTS.pageTitle = left(ARGUMENTS.pageTitle, 30)&’ …’/>
</cfif>

<cfif ListFindNoCase(application.topmenulist.pageURL, ARGUMENTS.pageURL,”|”)>
<cfset SESSION.crumbBox.pageTitle = ”/>
<cfset SESSION.crumbBox.pageURL = ”/>
<cfset SESSION.crumbBox.pageTitle = ListAppend(SESSION.crumbBox.pageTitle, ARGUMENTS.pageTitle,”|”)/>
<cfset SESSION.crumbBox.pageURL = ListAppend(SESSION.crumbBox.pageURL, ARGUMENTS.pageURL,”|”)/>
</cfif>

<cfif NOT ListFindNoCase(SESSION.crumbBox.pageURL,ARGUMENTS.pageURL,”|”)>
<cfset SESSION.crumbBox.pageTitle = ListAppend(SESSION.crumbBox.pageTitle, ARGUMENTS.pageTitle,”|”)/>
<cfset SESSION.crumbBox.pageURL = ListAppend(SESSION.crumbBox.pageURL, ARGUMENTS.pageURL,”|”)/>
<cfelse>
<cfset tmpLen = ListLen(SESSION.crumbBox.pageURL,”|”)/>
<cfset tmpPos = ListFindNoCase(SESSION.crumbBox.pageURL,ARGUMENTS.pageURL,”|”)+1/>
<cfloop from=”#tmpLen#” to=”#tmpPos#” step=”-1″ index=”fx”>
<cfset SESSION.crumbBox.pageTitle = ListDeleteAt(SESSION.crumbBox.pageTitle, fx,”|”)/>
<cfset SESSION.crumbBox.pageURL = ListDeleteAt(SESSION.crumbBox.pageURL, fx,”|”)/>
</cfloop>
</cfif>

<cfif ListLen(SESSION.crumbBox.pageURL,”|”) GT 5>
<cfset SESSION.crumbBox.pageTitle = ListDeleteAt(SESSION.crumbBox.pageTitle, 1,”|”)/>
<cfset SESSION.crumbBox.pageURL = ListDeleteAt(SESSION.crumbBox.pageURL, 1,”|”)/>
</cfif>

<cfreturn SESSION.crumbBox/>
</cffunction>

<cffunction name=”getCrumb” access=”remote” returntype=”any”>
<cfargument name=”currentPage”/>

<cfif ListFindNoCase(application.topmenulist.pageURL, ARGUMENTS.currentPage,”|”)>
<cfset SESSION.crumbBox.pageTitle = ”/>
<cfset SESSION.crumbBox.pageURL = ”/>
<cfset SESSION.crumbBox.pageTitle = ListAppend(SESSION.crumbBox.pageTitle, ListGetAt(application.topmenulist.pageTitle,ListFindNoCase(application.topmenulist.pageURL,ARGUMENTS.currentPage,”|”),”|”),”|”)/>
<cfset SESSION.crumbBox.pageURL = ListAppend(SESSION.crumbBox.pageURL, ARGUMENTS.currentPage,”|”)/>
</cfif>

<cfreturn SESSION.crumbBox/>
</cffunction>
</cfcomponent>

</code>

And there you have it ColdFusion with a little JQuery loving to solve a headache of a problem.