Andy Jarrett

Changing the jQuery location for BlogCFC

Another title for this post could be adding a property to BlogCFC. Basically I wanted to leverage Googles ajax API rather than use a local version of the jQuery library. There are a couple of reason for this such as distributed CDN delivery, better caching on the users machine etc, actually you might want to read this post to understand why you would want to do this at all.

Back to adding a property.

  1. We're going to edit the blog.ini.cfm (settings) file in org/camden/blog and add the following
    view plain print about
    1#jQueryLocation=http://{Your Blog URL}/includes/jquery.min.js
    2jqueryLocation=https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
    The first line is there for redundancy incase you need to test something locally or you are on a closed system with no web access. The second line is what we are insterested in for this post and points to Googles Ajax Library
  2. In Blog.cfc in org/camden/blog add the following to (around) line 101. It should be obvious where its going
    view plain print about
    1<cfset instance.jquerylocation = variables.utils.configParam(variables.cfgFile, arguments.name, "jquerylocation")>
  3. Finally in your Layout.cfm under tags/ change:
    view plain print about
    1<script type="text/javascript" src="#application.rooturl#/includes/jquery.min.js"></script>

    to the following

    view plain print about
    1<script type="text/javascript" src="#application.blog.getProperty("jquerylocation")#"></script>

At this point we are pretty much done in terms of getting done what we set out to do. The following bit of code adds the new setting to the admin pages so we can edit this in the future. What I explain next will add the jQuery location field to the settings.cfm in admin/

  1. Around line 91 the variable "keylist" is set. Add to the end "jqueryLocation"
  2. Find in the form where the "blogurl" is set and underneath add the following
    view plain print about
    1<tr>
    2<td align="right">jQuery Location:</td>
    3<td><input type="text" name="jqueryLocation" value="#form.jqueryLocation#" class="txtField" maxlength="255"></td>
    4</tr>
  3. The final part is the validation rule. All I am doing is checking the value given is a valid URL. You could expand on this but for my purposes this will do just fine. Look for <cfif structKeyExists(form, "save")> which is the start of the validation, go down a few lines and among the other rules add
    view plain print about
    1<cfif NOT reFind("https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?", form.jqueryLocation)>
    2<cfset arrayAppend(errors, "Your jQuery location must be a valid URL.")>
    3</cfif>
Thats it, you're done now. Going to your settings and updating them will remove the commented out line we added in point one earlier but with a method to easily edit the location this shouldn't be a problem now

Posted: 04-Jan-2010

View: 2575

Permalink: here

Comments