Blog of Shaun McCran - Architecting robust, elegant technical and business solutions - RIA

JQuery auto resize input field Plugin example

Mon, 06 Feb 2012 07:13:00 -0000

I was looking for a simple way to make an existing Text Area form field expand as-and-when a user fills in enough information to reach to bottom edge of the form element. James Padolsey has written a great little Auto resize function, you can get it from Github here: https://github.com/padolsey/jQuery.fn.autoResize. The documentation in the example included with the download above is pretty good, but I've put up an example of it working here as well: JQuery Auto resize Textarea plugin example

Dynamically tagging content with Keywords using JQuery

Wed, 01 Feb 2012 08:22:00 -0000

I've used a ticketing system called Lighthouse App for a while now, and one of the features I really like about it is its ability to tag content with keywords in a very easy and obvious fashion. If you have ever wanted to tag an article or some content with a list of Keywords then this blog article is for you. [More]

JQuery Sortable Drag and Drop lists and a server side AJAX save

Fri, 17 Jun 2011 07:19:00 -0000

I was recently asked this question about creating and using elements with the JQuery drag and drop functions:

Shaun, I'd like to be able to drag items (let's say grocery items) onto a list (let's say a grocery list) using JQuery and PHP to process and save the list. I found you drag and drop tutorial but I want the droppable to be in a list form. Is this easy?

This article explains how you can use a few JQuery interactions to create a sortable drag and drop list and save its state to a server side processing template.

[More]

JQuery datatable with added FancyBox and auto refresh

Thu, 19 May 2011 22:11:00 -0000

Recently I've had a few questions about how to use the datatables plugin to display data, and also integrate a pop up or lightbox function. The pop up would have an edit form in it, and when the user completes the edit the light box goes away and the datatable refreshes.

This is relatively straightforward to do, but there are several key concepts to getting everything working correctly, so I've broken it down into a few chunks. [More]

JQuery Drag and Drop to multiple div elements

Thu, 24 Mar 2011 21:58:00 -0000

My only previous experience with Drag and Drop web development was with Flex 2, which I have to say was a bit of a nightmare. There was an astronomical amount of setup to do in terms of event listeners and mouse watching services, so I was reluctant to get back into 'Drag and Drop' with any other technology.

This article explains how straight forward the JQuery Drag and Drop interfaces are to use, and how I constructed a Drag and Drop example using multiple divs.

There is an example of a JQuery Drag and Drop demo here. http://www.mccran.co.uk/examples/jquery-drag-drop

[More]

Using the JQuery Tooltip plugin to enhance title attributes

Sun, 27 Feb 2011 21:19:00 -0000

The title tag attribute is a modern staple of any developers html code base. Most of us use them, more of us should use them more. I've learnt more recently that they have wider implications for Accessibility users, but I've also come to change my thinking of their use.

This article shows how you can use the JQuery tooltip plugin to enhance the title attribute, and how the title tag can be used to convey a more useful message to your browsers.

[More]

JQuery scrolling within a Div

Sat, 05 Feb 2011 14:10:00 -0000

Ever wanted to have your page content scroll based on user interaction? In this article I'll show you how to create a simple JQuery scrollable area that will allow users to click on 'next' style links to view more information. I put this together as most of the JQuery scrolling articles out there deal with scrolling the entire page, but I just want to scroll inside a defined div element.

There is a demo of this here: JQuery scrolling within a Div [More]

Filtering a SELECT field using AJAX and JQuery

Wed, 22 Dec 2010 09:51:00 -0000

I've got a select form field, and I want it to change based on a search string that someone enters. Luckily for me the select field is dynamically driven from a database, so the most obvious way for me to do this is to make an AJAX post request using the string entered to amend the SQL query building the field.

This article shows you how to do this, there is a demo of the select field using AJAX here: http://www.mccran.co.uk/examples/jquery_textfilter_selectfield/

[More]

How to reload a JQuery Datatables table data, using the API

Fri, 02 Jul 2010 18:38:00 -0000

Since I found the JQuery dataTables plugin, I use it quite a lot. I think it's a great way to display tabulated data, and it provides simple easy to use pagination and filtering options. I've been building an interface to manage data, and arrived at the need to reload a datatable powered table, through a JavaScript request, rather than a page reload, or external variable (Url or form). The problem with this is that if you try and re initialise a datatable into an existing datatable you get an error:


DataTables warning: Unable to re-initialise DataTable. Please use the API to make any configuration changes required.

So you cannot re initialise an existing dataTable object. Looking through the API methods there is a relatively straight forward fix.


if (typeof dTable == 'undefined') {

	dTable = $('#example').dataTable( {
	// data tables code
	"bProcessing": true,
	"bStateSave": true,
	"bServerSide": true,
etc...
	aoData.push({ "name": "pageFilter", "value": filterText });
	});
else
		{
			dTable.fnDraw();
		}

This code is basically checking if the object 'dTable' already exists, and if it is we are re drawing it, rather than using the existing object. The fnDraw() method re-draws the table, so the data is refreshed. It uses the fnClearTable() method to first clear an existing data set, and the re draws it. As an aside the 'filterText' value is a JavaScript value set elsewhere (a select field) that I am sending through to my server side request. It is used in a simple where clause in a query.

Xbox 360 Gamer Card App released on RIAforge.org

Sat, 29 May 2010 23:46:00 -0000

After Scotch on the Rocks in London I was struck with how many developers are also gamers. It seems there are a lot of us who build applications for people, then go home and relax in front of an Xbox 360 Console. With that in mind I thought I would wrap up a service I have used in the past. A site, http://www.mygamercard.net/ provides a service where you can generate a graphic of your Xbox 360 account. They call this a Gamer Card, and it is available in a few different formats. There is an example here You can download the project here: http://gamercard.riaforge.org/ [More]

Scotch On the Rocks – day one review

Tue, 25 May 2010 14:22:00 -0000

Monday was the first day of the 'Scotch on the Rocks' 2010 Adobe conference (sponsored by Fuzzy Orange). I went along for a couple of reasons. To see what has been happening in the community, what development ideas people were throwing around as it is a bit of a two day think tank, and to put some faces to the Twitter accounts I've been following. This article is a breakdown of the first days seminars I attended, and some thoughts and considerations about the content on show. [More]

Incredibly simple JQuery image change on mouse over effect

Mon, 10 May 2010 11:56:00 -0000

I was recently asked in conversation if it would be possible to have a list of items, and when a user mouse'd over the headers in the list, an image effect happened, IE a thumbnail image was displayed. I figured this would be an ideal use for JQuery, so this article is how to write an incredibly simple JQuery image change. There is a full demo of this here: JQuery mouse over demo [More]

JQuery multiple show and hide div’s based on click event

Tue, 04 May 2010 15:59:00 -0000

This article shows how to use JQuery to show and hide many div's at the same time, revealing the content that the user requests. It also degrades gracefully if you turn off Javascript. Have you ever tried to display a Questions and Answers type page, where the Question is a clickable link that shows the corresponding Answer (FAQ's)? It is quite tricky to make this interesting, and Accessible to impaired users. A full demo of multiple show and hide divs is here: link [More]

How to stop FCK Editor wrapping your content with 'P' tags

Tue, 04 May 2010 13:19:00 -0000

Whilst testing a website for WCAG 2 Accessibility compliance I noticed that all my dynamic content from a database was wrapped in the HTML 'P' element. The functionality that put the content into the database was a rich text area using the inbuilt FCK Editor. This article deals with how to stop FCK editor wrapping your content in undesirable tags. [More]

JQuery Datatables plugin example using a server side data request (coldfusion)

Thu, 29 Apr 2010 18:04:00 -0000

Im my previous article on how to use the JQuery datatables plug I concentrated mainly on the JQuery script, and how to build the AJAX request to receive a JSON response. In this article I will demonstrate the full application which will include the front end JQuery, building the back end server response and a few tips that I've picked up since implementing the plugin. I am using an MS SQL table filled with UK location data that I also used for a weather webservice, to fill the table. A full example of this working can be seen here: Data table server side example [More]