Flipflops.org

I feel a bit daft posting this because in the end the answer was so easy to find - but maybe it will help somebody else.

I’ve been re-writing my users / groups permission system for CakePHP 1.2 and decided to incorporate as much built in functionality as possible so I’m using the Auth Component - which is great - but one thing kept bugging me, I couldn’t for the life of me figure out how to get the messages from Auth to display in my views - but by debugging I could see they were sitting there right in the Session.

I spent a long time Googling and looking at the API for clues, eventually in desperation I looked at the cookbook (I have no idea why I hadn’t already looked there - as I use it a lot…) and the answer was both very easy and staring me right in the face.

Just pop the following in a view or layout:

1
2
3
4

 
if ($session->check('Message.auth')) {
		$session->flash('auth');
	}

Recently for a project, a client wanted to be able to print pages from a web application that were just forms. This was never intended when the application was originally built, so there were no separate view screens of data. Naively I thought this would be easy - knock up a print style sheet and bob’s your uncle… if only.

There are a couple of problems that just aren’t really fixable using a pure CSS solution, firstly <select> menus look pretty horrible no matter what you to them and <textarea> fields look fairly bad, but even worse than their aesthetic merits (or lack of rather) is the fact that the overflowing content i.e. the content that you need to scroll to see, will not be printed.

In the end for the application I ended up adding views, but it got me thinking and so I’ve written a quick jQuery plugin to print forms. It works by looking for any <select> menus or <textarea> fields and replacing them with <div> tags styled to look like form elements. When you click on one of the <div>s to edit it, it reverts to the original form element and when it looses the focus (using the jQuery blur() method) the field is swapped back and replaced by the <div>.

When you come to print the form because all of the <select> menus and <textarea> fields have been replaced by <div>s you can style them as you want using a print style sheet and get a nice looking form with no missing content.

Have a look at the working example and view source to see how to use it.

download printform plugin example

You will want to edit / write CSS for both screen and print appropriate to your situation.
Tested on IE6, IE7, Firefox 2.0.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

 
/*
 * printform 1.0
 * By John Elliott (http://www.flipflops.org)
 * Copyright (c) 2008 John Elliott
 * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
*/
 
/**
 * convert textareas and select tags to divs so that you HTML forms can be printed.
 *
 *
 *
 * @name printform
 * @type jQuery
 * @author John Elliott (http://www.flipflops.org)
 * @desc 
 * 
 * @example $('#tester').printform();
 * @desc call the plugin on #tester - any select or textareas will be replaced
 *
 * @param settings - not used, but included for future proofing! (I'm sure there will be options sometime...)
 *
*/
 
jQuery.fn.printform = function(settings){
	return this.each(function(){
		new jQuery.printform(this, settings);
	});
}
 
 
 
jQuery.printform = function(obj, settings) {
 
  	/*
  	* within a parent object - replace the textareas and select menus
  	*/
 
 
 	init(obj, 'textarea');
	init(obj, 'select');	
 
 
	function init(obj, fieldType) {
 
	/*
	* loop through each instance of an element within the parent 
	*/
 
		obj = jQuery(obj).attr('id');
 
		jQuery('#' + obj + ' ' + fieldType).each( function() {
 
			var id = jQuery(this).attr('id');
 
			field_replacer(id, fieldType);
		});
	}		
 
 
	function field_replacer(id, fieldType) {
 
	/*
	* function to replace the elements with divs
	*/
 
			str = jQuery('#' + id).val();
			str = str.replace(/\n/g, '<br />');
 
			if ( jQuery('#replace-' + id).length > 0 ) {
				// if a replacement div already exists for this element, then just show it.
				// update the content of the replacer with the edited content
				jQuery('#replace-' + id).html(str).show();			
			} else {
				// otherwise create a new replacement div for the element
				jQuery('#' + id).after('<div class="' + fieldType + '-replace" id="replace-' + id + '">' + str + '</div>');			
			}
 
			jQuery('#' + id).hide(); // hide the element that has just been replaced
			field_watcher(id, fieldType); // add event listeners
	}											
 
	function field_watcher(id,  fieldType) {
 
	/*
	* add listeners to the elements
	* onclick - show the original element and hide the replacer
	* onblur - call the field_replacer to update the page
	*/
 
		jQuery('#replace-' + id).click(function() {
 
		jQuery('#' + id).show().focus();
		jQuery('#replace-' + id).hide();
 
		jQuery('#' + id).blur(function() {
 
			field_replacer(id,  fieldType);								
 
		});
	});
	}
};

Thanks to to Mike Alsup for his great (if rather daunting) guide to writing plugins on Learning jQuery.

Quite often you end up in situations where you are required to check and see if one time period overlaps another time period. Probably the most common situation this occurs in is when you are building a booking system - be it for tables or cars or rooms.

You have a series of entries in a database with a start (date)time and an end (date)time and before adding a new record you need to check that it doesn’t overlap with another booking.

The solution is fairly simple but I always end up making a quick diagram on a piece of paper to check.

As you can see two time periods can either be sequential (i.e. there is no overlap at all) or they can overlap in one of four ways. Put this into a diagram and the solution becomes pretty obvious.

There is an overlap if end_time_1 > start_time_2 AND start_time_1 < end_time_2

An example SQL query would be something like the one below but make sure your datetime formats are correct - in MySQL the default format is YYYY-MM-DD hh:mm:ss

 
SELECT * FROM bookings WHERE room_id = '" . $room_id . "' AND ((date_end > '" . $start_date . "') AND (date_start < '" . $end_date . "')) ";

The above query will pull back the records where the times overlap.

Lately I’ve have taken a little bit of time out from Art-Thing and have been working on a smaller side project called www.blinks.org.uk

I’ve been using this as a bit of a test bed for various aspects of Art-Thing but it is also a fun little project in its own right. AND even better it should be ready very soon, it is a directory of UK businesses and services with a pretty flat structure based on tagging and regions. Fast, easy to use and fun (if a business directory can be fun).

The site is almost ready to launch and the whole process from the first ideas until now has been very quick - it is built in CakePHP 1.2 and jQuery which make coding a pleasure again. It’s also fun to do a bit of design for a change instead of just the stuff under the hood.

Here is a sneak preview:

If you own or manage a business in the UK why not sign up for FREE with blinks.org.uk and see how it can help your business.

blinks.org.uk is a brand new directory of businesses and services based in the UK.

Every entry in the directory is approved by a real person and businesses have to provide their actual address so the directory is completely spam free and only contains quality listings.

• Link back to your website (great for SEO)
• Add a description of your business or service
• Add an image or company logo
• Update your entry whenever you want
• Add you business or service to multiple categories
• Add tags (keywords) - that are right just for you
• Automatically show your location on our map