Monthly Archives: June 2008

jQuery Table sorter

While making a e commerce application I wanted the ability to easily sort product and categories by click and drag. Basically to allow the customer to re-order the way their products and categories are displayed. No doubt that you’ve seen application that have numerous “move up” and “move down” buttons that seem to take forever to use and from development point of view cumbersome to do. Of course the other method is to have input boxes with numbers in that can be altered, again cumbersome for both user and designer.

Being a massive fan of jQuery I thought there must a easy ‘drag and drop’ solution. I regular use the interface plugins that covers most of my needs. Though they provide a ‘sortable’ plugin that works great for divs, it simply cannot sort tables due to the fact that certain CSS styles (like position static) cannot be applied to table rows.

After a long search I eventually came across a plugin solution called ‘Table Drag and Drop’. This simple plugin like all jQuery requires just a small amount of code to get it working.

$(document).ready(function() {
        $("#mytable").tableDnD();
});

To apply to a basic table like this:

My Product 1 £10.00 Active
My Product 2 £2.99 Not active
My Product 3 £23.49 Not active
My Product 4 £19.99 Active
My Product 5 £7.99 Not active

This will give you the following results like this (try dragging the rows):

My Product 1 £10.00 Active
My Product 2 £2.99 Not active
My Product 3 £23.49 Not active
My Product 4 £19.99 Active
My Product 5 £7.99 Not active

I’ve had success with this with the most complicated tables with embeded forms, complex CSS styling and 100+ rows without problems. The plugin includes various settings to assign different classes when dragging to get a user friendly feel.

Now you probably wondering how you can now get this ordering information back to the web sever to save it in the database. Database storage is simple, use a attribute storing a int and simply update the table in the order which they are received. It has a call back function called serialize(). This is an array with containing the id’s of the table rows in the new order in the table. Just loop these values update the table.

This code uses simple table with some CSS styling and POST an array back to a web sever with the new order.

$(document).ready(function() {
	$('#mytable2').tableDnD({
                onDragClass: "dragrow",
		onDrop: function(table, row) {
                // get the serialized data for transport
		serial = $.tableDnD.serialize();
                       // use jQuery ajax function to send information
			$.ajax({
				type: "POST",
				url: "inc/product_controller_ajax.php",
				data: serial,
			});
		}
	});
});
#mytable2 {
border: 2px solid black;
border-collapse: collapse;
width: 50%;
}
.row1 {
background-color: #d8dff4;
}
.row2 {
background-color: #f7e8e9;
}
.dragrow {
background-color: #a70707;
color: #ffffff;
}

My Product 1 £10.00 Active
My Product 2 £2.99 Not active
My Product 3 £23.49 Not active
My Product 4 £19.99 Active
My Product 5 £7.99 Not active

Now at the sever side all you have to do is loop through the value sent via ajax. I have used POST in this example. The name of the value is the ID of the table, so for example a PHP solution for this is as follows:


Links

Table Drag and Drop Web site

Download Table Drag and Drop (Local copy version 0.4)

jQuery (required)

Firefox 3 – The best bits

Firefox logoThe latest version of Mozilla Firefox is due to be released later early next week on the 17th June 2008. I’ve been participating in the pre-release testing and cant say enough good points about it. If it wasn’t for incompatibility for certain addons I use (namely firebug) I would of switched to it weeks ago. Now RC3 has been released compatibility for popular addons such as foxmarks and firebug are now available.

So why should I bother downloading (7 Mb) and installing FF3?

As you’ve all probably already read on the web site FF3 has major security, performance, improved password management, anti virus integration & a download manager just to name a few.

What interest me is features that ultimately change the way we surf the web and interact with our web browser. FF3 takes two classic old web browsing features; bookmarks (favourites) and history and gives them a new lease of life. If you like me i’ve really used the history because its always been pretty inaccessible to search. I use bookmarks but can never find anything in them and normally just re-search it on Google.

FF3 provides loads of new tools and features to sort, search and tag bookmarks. The best feature is what they call ‘Location bar & auto-complete’. This is a Google suggest inspired search tool that help you to quickly locate that missing bookmark or that pages you know you were once on.

Autocomplete

As you can see its clear and indicates if its a current bookmark or not by the star on the right. It has a sort of Facebook search look about it that highlights the matched letter(s) in bold.

There are massive improvements that make upgrading more then worth you while. Firefox RC3.

Changing the spark plugs on a Chrysler Voyager V6

The rear spark plugs on a Chrysler Voyager V6 (2000) at first seem very difficult to change. I have heard of various methods, from gaining access from underneath the car, to lifting the inlet manifold an inch or two.

I decided to take the easiest approach, which might not be the quickest if you have access to a vehicle lift, but is relatively straight forward.

As well as a new set of spark plugs and ignition leads you may need a new inlet manifold gasket as it could break when you remove the manifold

Below is a step by step photo guide on how to replace the spark plugs, which you might find helpful if tackling the job yourself.

Note position of wiper arms
Remove wiper arm spindle cap
Remove wiper arm spindle nut
Remove wiper arm and wiper top panel screws
Panel clips
Remove flat nuts from wiper top panel studs
Disconnect screen washer tubing
Disconnect screen washer tubing on jets
Remove wiper box top bracket nuts
Remove main wiper box bolts
Remove main wiper box bolts
Remove wiper motor multiplug
Disconnect wiper box drain pipes
Lift out wiper box assembly for easy access to inlet manifold
Remove 3 alternator bracket bolts and rotate plate upwards
Remove distributor bolts
Remove air box and vacuum pipes, breather pipes, multiplugs, throttle cables on throttle body
Remove exhaust recirculation pipe bolts (a bit tricky)
Remove inlet manifold support bracket bolt from engine block
Remove cable mounting bracket bolt on back of manifold(left side) (a bit tricky)
Remove cable mounting bracket bolt (right side) (also a bit tricky)
View of cable bracket/bolts on back of manifold(may assist in removal)
Remove earth wires on bulkhead stud
Remove inlet manifold nuts and bolts
Remove inlet manifold and cover engine inlet ports
Remove ignition leads and Remove and replace rear spark plugs
Remove ignition leads and Remove and replace front spark plugs
Check wiring and multiplug cable mounting bracket
Fit new inlet manifold gasket
Fit new air filter at this stage if necessary and rebuild

Refit rear ignition leads; rebuild inlet manifold assembly, electrics and wiper box.

Parts used

Nike plus data API access

As Nike + wristband user and a web developer i thought it would interesting if i was able to access the raw data of my runs.

Nike provide various ‘widgets’ that can be embedded into web pages which is convenient and fun. But i find them a little clunky in flash. You can see an example of one I added to this site here. So i decided to see what I could find on the net to access the run data.

It turns out the everyone’s run data is accessible via a URL linking to a XML document. All that is required is your user ID. Simply go to the following URL and insert your user ID at the end of the string.

http://nikeplus.nike.com/nikeplus/v1/services/widget/get_public_run_list.jsp?userID=<YOUR ID HERE>

All my data can be accessed here for example. Please take note about the XML document

  • Distances are in kilometres (despite having all my settings in miles).
  • Time locals appear to be correct.
  • Time is measured in millseconds

Now your probably wondering how do i find out my user ID. Do this:

  1. Sign into Nike Plus.
  2. Click ‘My Runs’.
  3. Click the ‘Share’ button on the top right of your runs.
  4. Click ‘Add to a Web page’.
  5. Click ‘Grab the Code’. Now it copied the code to your clip board.
  6. Open up a text editor and paste it in (ctrl v). You should have something like this below. The ID is highlighted, just copy it out

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″ width=”198″ height=”145″ id=”Nike+ Runs” align=”middle”><param name=”allowScriptAccess” value=”sameDomain” /><param name=”wmode” value=”transparent” /><param name=”movie” value=”http://nikeplus.nike.com/nikeplus/v1/swf/scrapablewidget/rundetail.swf” /><param name=”quality” value=”high” /><param name=”bgcolor” value=”#ffffff” /><param name=”FlashVars” value=”type=last5Runs&userDefaultUnit=mi&screenName=paulrichards&dateFormat=DD/MM/YY

&id=1759895612&region=emea&language=en&locale=en_gb”/><embed src=”http://nikeplus.nike.com/nikeplus/v1/swf/scrapablewidget/rundetail.swf” quality=”high” wmode=”transparent” bgcolor=”#ffffff” width=”198″ height=”145″ name=”Nike+ Runs” align=”middle” allowScriptAccess=”sameDomain” FlashVars=”type=last5Runs&userDefaultUnit=mi&screenName=paulrichards&dateFormat=DD/MM/YY&id=1759895612&region=emea&language=en&locale=en_gb” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer”></embed></object>