A few weeks ago I created an inline editing system for a Content Management System. It allowed a user to click on a page element and edit it inline. The updated data was then submitted through an AJAX request.

I have recently discovered an issue with some of the JavaScript code that I wrote in the event handling routine.

[More]

I recently build an application that returned a JSON object of data based on a select field value. Whilst I was building this I encountered an error using the JavaScript eval() function on my JSON response. I am using the eval() function to parse a string from my JSON response, but firebug is showing a JavaScript error of "Invalid Label".

This is the code:

After having a Google around it appears that the eval function is interpreting the first item in the JSON response as a label, rather than data. By changing the code like this:

We are forcing eval to recognise the data as variable data. Now the JSON to string translation works.

I have recently spent some time building a dynamic XML driven form generator. The last element of this was the checkbox form element. All my other fields were being validated as either required, or needing a certain length using the JQuery Validation plug-in. ( http://jquery.bassistance.de/validate/)

This article explains how I put together a checkbox validation routine using the Validate plug-in.

[More]

Whilst building a new piece of functionality I have been trying to combine a JQuery carousel plug-in and the lightview prototype plug-in. This threw up an unexpected issue. Both libraries map the dollar ($) as their shortcut indicator. JQuery uses "$" as a shortcut as a replacement for "jQuery" and Prototype uses "$" as well.

It turns out that there is a JQuery command for exactly this issue. Wherever you include the JQuery library reference add another script code. The noConflict function maps which character you tell it as the short name for "JQuery".

Just remember to change your references to JQuery from "$" to "J", or whatever you assign it to.

Now both the Libraries can load into different namespaces.

If you have a framework that controls the URL in some way then you may have an issue when it comes to Google Analytics tracking. In this blog entry I will examine how to alter your GA tracking so that you can specify custom URL values to track. I will then apply this to a FuseBox framework.

Traditionally Google Analytics code tracks each page impression by capturing the URL and all values of the Query string, storing it in a cookie and sending it back to the Google search engine through a JavaScript call. When all your site / applications pages are "index.cfm" it may prove difficult to generate useful Analytics information.

In this example I am using a FuseBox framework. If you are unfamiliar with this, the premise is that all the templates use "index.cfm" and then pass through two parameters. The first is the component to use as a controller (we will use public.cfc) and the second value is the function name to call within that controller. So our URL may look like this:

[More]

This entry will deal with how to create a displayed / collapsible floating div, using JQuery. When I build a web platform I often like to include small sections of text alongside the functionality, just to provide the users with a little guidance on what is going on. Rather than having these inline, where they can often interfere with the content and display, I like to add them to a 'help' div that I float inside the framework. First we include the JQuery library from Google, and our link. It doesn't go anywhere, but we will attach a JQuery event to it. Next we create our JQuery function, attached to the 'help' div. This adds a div to the document with whatever content you have set in it. There is also a 'close' link in the floating div that calls the close function. Lastly we add some styling and positioning to tie the whole lot together. This gives the pop up div its shape and style. I've positioned the floating div on top of the calling function text. You can see an example functionality here.

There are many ways of hiding all your page elements then only showing specific areas based on user selection. One old school way of changing the displayed page content was with a select field that had an onchange event that posted to the same page, but with a URL variable.

I have been testing out a variation on this using the JQuery show() / hide() functions.

We attach an event to the select field, and pass the selected option to a JQuery function, as in the example code below.

We have a series of DIV's that are named the same as the select field options. All these DIV's will be hidden by default, apart from the "start" div.

Lastly we have our JQuery script. Here we have our showHide function. This accepts a DIV id, which is then shown. All other DIV's are hidden.

The last piece of script here simply hides all the DIV's on the page load, so that they are all hidden by default.

Putting it all together, and making it dynamic based on a list, it looks like this:

An example is here.