I just finished off a nice interface where an arbitrary amount of nested lists are used to represent a tree. Any item can be dragged and dropped on any other item as a way of moving them and placing them as children beneath another item/branch. The functionality mimics that of any file browser that can display folder structures as a tree.

Check out the demo here, drag and drop texts on other texts. The goal here is to sort various tags in an arbitrary hierarchy, and then save it to a database by way of Ajax and jQuery JSON. In order to do that we have to loop through the whole tree in a recursive manner, more on that after the code listing.

I’ve taken the basic functionality from the Interface drag and drop tree. Note how their interface is a lot more complicated as it resembles a real file browser. Below all of that has been ripped out as we only want the basic sorting here. I’m also using the latest version of the jQuery UI components whereas they’re using somewhat dated versions.

Note that I’m also making use of the print_r jQuery plugin in the demo.

function parseTree(ul){
	var tags = [];
	ul.children("li").each(function(){
		var subtree =	$(this).children("ul");
		if(subtree.size() > 0)
			tags.push([$(this).attr("id"), parseTree(subtree)]);
		else
			tags.push($(this).attr("id"));
	});
	return tags;
}

$(document).ready(function(){
		
	$("li.tree_item span").droppable({
		tolerance		: "pointer",
		hoverClass		: "tree_hover",
		drop			: function(event, ui){
			var dropped = ui.draggable;
			dropped.css({top: 0, left: 0});
			var me = $(this).parent();
			if(me == dropped)
				return;
			var subbranch = $(me).children("ul");
			if(subbranch.size() == 0) {
				me.find("span").after("<ul></ul>");
				subbranch = me.find("ul");
			}
			var oldParent = dropped.parent();
			subbranch.eq(0).append(dropped);
			var oldBranches = $("li", oldParent);
			if (oldBranches.size() == 0) { $(oldParent).remove(); }
		}
	});
	
	$("li.tree_item").draggable({
		opacity: 0.5,
		revert: true
	});
	
	$("#save").click(function(){
		/*
		var tree = $.toJSON(parseTree($("#tag_tree")));
		$.post("@saveTags", {tags: tree}, function(res){
			$("#printOut").html(res);
		});
		*/
		$.debug.print_r(parseTree($("#tag_tree")), "printOut", false);
	});
});

Let’s walk the droppable code first as it’s the most complicated:

1.) We begin by setting two options (tolerance and hoverClass) and the callback (drop). Tolerance -> pointer will result in a properly set drop condition if the mouse pointer hovers over the drop target while we drag something, a nice hover class is good to have too that will be assigned to the drop target to indicate that yes we can drop now.

2.) The callback will first set top to 0 and left to 0 on the dropped element, I don’t know why I have to do this but it didn’t work properly without that line, the jQuery UI code assigned these two properties to any moved element making them end up in the strangest of places.

3.) Since we are in effect dropping on only the spanned text elements, not the list elements themselves (doing that would create unresolvable ambiguities), we have to get at the parent list element of the text in question. That would be the parent().

4.) I’m not sure we need that test to check for self-drops, couldn’t hurt though.

5.) Next we check if we have a child ul element already, otherwise we create it, and append the dropped object to its inner html.

6.) We also save the prior parent (ul) of the dropped list. If it doesn’t contain any elements anymore it will be removed.

When the Save button is pressed we will loop through the whole tree recursively with the help of the parseTree function which will call itself whenever a list contains an ul element.

Finally we could convert the resultant array to a JSON string and send it to the server by way of Ajax which is done in the commented out code here. Instead we use the print_r function to output the whole structure for inspection.

Related Posts

• Multiple select lists with jQuery and JSON
• Adding search with jQuery and Check Boxes
• The basic C(R)UD
• Shortening multiple URLs with jQuery, PHP, picolisp and bit.ly
• Facebook style information box with jQuery

Table of Contents for ActionScript 3 in Flash CS3

1. Menu and Banner from XML with AS3 and Flash CS3
2. AMFPHP in Flash CS3 with AS3 - jQuery.post style
3. Creating Help with Flash and ActionScript3
4. Detecting parent URL with AS3 and jQuery - redux
5. Thumb Banner Rotator in ActionScript 3

The goal here is to rewrite an existing thumb banner rotator that we were using at first on Cardlovers.com, a poker community (click the link or the image to see the final result). It was working OK when only loading images but something went wrong when we started loading shockwaves in it.

For some reason they wouldn’t unload properly, it could be the result of bad programming but the reason might also lie in the fact that the original is written in AS2 for player version 8.

Anyway the end result was that after a few rotations the banner would hog 100% of CPU, hence the decision to rewrite the whole thing from scratch using AS3. It worked, the hogging is gone, the final result can be seen on Cardlovers.

If the discussion is a bit hard to follow here you might want to check out first of all the xml flash banner tutorial, the flash uploader tutorial might also shed some light on how the external interface works because I will not repeat myself here.

Update: I just changed the behavior in switchMain(). Instead of fetching a random banner all the time only the first fetch is random, after that banners are fetched in order from top to bottom, here’s the function that manages that:

function getCurNum(){
	if(isNaN(this.prevMenuNum))
		return this.getRandItemNum();
	else if(this.prevMenuNum == this.menuList.length - 1)
		return 0;
	else
		return this.prevMenuNum + 1;
}

So now you call getCurNum instead of getRandItemNum in switchMain.

End update.

Let’s walk the code, first banner.fla:

import flash.external.*; 
import flash.net.*; 
var loader:XMLLoader = new XMLLoader(); 
var theStage = this;

loader.getXML(xmlSource, function(res){ 
	var banner = new BannerHandler(res, theStage);
});

The XMLLoader class that is loading the configuration data is described in the above mentioned flash banner tutorial. And the BannerHandler class is below:

package{ 
    import flash.utils.*; 
    import flash.display.*; 
    import flash.text.*; 
	import flash.events.*; 
    import flash.net.*;
	import flash.geom.*;
     
    public class BannerHandler extends MovieClip{ 
         
		var bannerXml:XML;
		var menuItems:Object;
		var menuList:Array;
		var menuLoaded:Boolean;
		var p:MovieClip;
		var fCnt:Number;
		var delayTime:Number;
		var switching:Boolean;
		var prevMainLoader:String;
		var prevMenuNum:Number;
		var manualSwitch:Boolean;
		var moveMenu:Number;
		
		function BannerHandler(bannerXml:XML, p:MovieClip){
			this.bannerXml = bannerXml;
			this.menuItems = new Object();
			this.menuList = new Array();
			this.menuLoaded = false;
			this.p = p;
			this.fCnt = 0;
			this.delayTime = int(this.bannerXml.delayTime);
			this.switching = false;
			this.prevMainLoader = '';
			this.prevMenuNum = NaN;
			this.manualSwitch = false;
			this.moveMenu = 0;
			this.buildMenu();
		}

Let’s go through the variables:

bannerXml Is the XML structure that we load to configure the banner.

menuItems Is an object that will map some configurations to various thumbnails in the banner.

menuList Is an array that is mainly used to keep track of the position of a certain menu in the menu.

menuLoaded Keeps track of whether all thumbnails have loaded or not.

p The parent time line.

fCnt The frame count, there might already be some global for this but some things are quicker doing manually than scouring the manual for the proper solution.

delayTime The time in seconds that has to pass before we rotate the banner, loaded from the XML.

switching Controls whether we are to switch banner or not.

prevMainLoader Will keep track of the prior banner in order for us to be able to fade it out when the new one fades in.

prevMenuNum Keeps track of the previous thumbnail that had focus, similar in functionality to prevMainLoader.

manualSwitch If the user starts interacting with the thumbnails (menu items) we need to stop the auto rotating behavior, this is the one that does that.

moveMenu An integer that constantly moves the menu, will be 0 most of the time. If positive we move the menu downwards, and if negative upwards; this is due to the fact that the flash coordinate system is the fourth quadrant.

As you can see we call buildMenu() in the constructor, let’s jump there:

function buildMenu(){
	var itemHeight = this.bannerXml.menuItemHeight;
	var curY = 0;
	for each (var item:XML in this.bannerXml.item){
		this.menuItems[item.thumb] = {bigUrl: item.img, loadedOk: false};
		this.menuList.push(item.thumb);
		loadMenuItem(item.thumb, curY);
		curY += int(itemHeight);
	}
	this.menuLoaded = true;
}

We build menuItems and menuList, mainly saving the paths to the resources, these paths will later be used as ids/names for the containing movie clips. Note how easily we can access various parts of the XML structure in AS3. I lied a little above when I said that menuLoaded will keep track of whether the menu has loaded completely or not, it will simply keep track of whether the buildMenu method has been called or not.

Let’s move over to loadMenuItem():

function loadMenuItem(curUrl:String, yPos:Number){
	var pClip 		= new MenuItem();
	pClip.y			= yPos;
	p.MainMenu.addChild(pClip).name = curUrl;
	var mItem     	= new Loader(); 
	var urlReq    	= new URLRequest(curUrl); 
	mItem.load(urlReq); 
	pClip.addChild(mItem);
	mItem.contentLoaderInfo.addEventListener(Event.COMPLETE, this.menuIsLoaded); 
}

We begin with creating pClip (abbreviation of parent movie clip, as in the parent that will contain the bitmap), note that pClip is an instance of MenuItem which in turn is an empty movie clip that has been assigned a dummy class. This can be done by right clicking the clip in the library and selecting properties.

MainMenu is another empty clip that has been placed on the stage, as you can see it will contain the menu items/thumbs. Next we do the whole Loader -> URLRequest -> Event.COMPLETE routine in order to load the thumbnail jpeg correctly.

Let’s take a look at the callback menuIsLoaded():

function menuIsLoaded(event:Event){
	
	var pClip = event.target.loader.parent;
	
	pClip.addEventListener(MouseEvent.ROLL_OVER, this.mouseOverHandler);
	pClip.addEventListener(MouseEvent.ROLL_OUT, this.mouseOutHandler);
	pClip.addEventListener(MouseEvent.CLICK, this.menuClick);
	
	pClip.alpha = 0.7;
	this.menuItems[pClip.name].loadedOk = true;
	
	if(this.menuLoaded == false)
		return false;
	for each (var item:XML in this.bannerXml.item){
		if(this.menuItems[item.thumb].loadedOk == false)
			return false;
	}
	
	this.p.addEventListener(Event.ENTER_FRAME, this.everyFrame);
	this.p.addEventListener(MouseEvent.MOUSE_MOVE, this.mouseMoveHandler);
}

So after the graphic has loaded we assign various callbacks to the parent and the stage, as you can see the stage stuff won’t happen though until all the menu items/thumbs have loaded. Anyway the callbacks are:

mouseOverHandler Controls what happens to a menu item when the cursor enters its area.

mouseOutHandler Controls what happens to a menu item when the mouse cursor leaves its area.

menuClick Controls what happens when a menu item is clicked.

everyFrame This is the main loop which will not start until the whole menu has loaded.

mouseMoveHandler This one checks whether the mouse cursor is in certain areas and will initiate menu movement if need be (more on that later).

Lets begin with the main loop, everyFrame():

function globalY(clip){
	var tPoint = new Point(clip.x, clip.y);
	var gPoint = clip.localToGlobal(tPoint);
	return gPoint.y;
}

function switchMain(){
	if(this.getSecs() % this.delayTime == 0 && this.switching == false){
		var curNum = this.getRandItemNum();
		var bigUrl = this.getItemConf(curNum).bigUrl;
		
		var curItem = this.getItem(curNum);
		curItem.addEventListener(Event.ENTER_FRAME, this.menuFadeIn);
		if(this.globalY(curItem) + curItem.height > 275)
			this.moveMenu = -3;
		else if(this.globalY(curItem) < 0)
			this.moveMenu = 3;
		else
			this.moveMenu = 0;
			
		this.fadeOutOthers(curItem);
		
		this.loadMainPic(bigUrl);
		this.switching = true;
		this.prevMenuNum = curNum;
	}else if(this.getSecs() % this.delayTime != 0)
		this.switching = false;
}

function everyFrame(event:Event){
	this.moveMenuHandler();
	if(this.manualSwitch == false)
		switchMain();
	this.fCnt++;
}

We move the menu, rotate banners if the manual switching mode is off and increase the frame count.

If manual switching mode is off we:

1.) Check whether it’s actually time to switch or not, and if it is:

2.) We get the number of the menu item to switch to in a random fashion, well not completely, two in a row is not possible, it would look stupid.

3.) We get the url of the banner to load with the help of the menu item number.

4.) We get the menu item in question and fade it in by applying the menuFadeIn method as its enter frame callback.

5.) Next we check the global y position of the menu item in question, if it’s outside of the stage the menu will move enough up or down in order to show it.

6.) We fade out all other menu items and load the banner which has been mapped to the current menu item.

7.) Since we can’t switch right away; we have to wait for the stipulated delay time as it has been specified in the XML file we will set the switching variable to true to disable rotation for now.

1.5.) If it’s not time to switch we simply check if it is time to start rotating and if it is we set switching to false in order to enable rotation.

Let’s get back to the other callbacks:

function mouseOverHandler(event:MouseEvent){
	var clip = event.target;
	clip.alpha = 1;
	clip.transform.colorTransform =  this.setColor(clip.transform.colorTransform, 0.5);
}

function mouseOutHandler(event:MouseEvent){
	var clip = event.target;
	clip.alpha = 0.7;
	clip.transform.colorTransform =  this.setColor(clip.transform.colorTransform, -0.5);
}

function menuClick(event:MouseEvent){
	this.loadMainPic( this.menuItems[ event.currentTarget.name ].bigUrl );
}

function mouseMoveHandler(event:MouseEvent){
	var xpos = event.stageX;
	var ypos = event.stageY;
	var menu = this.p.MainMenu;
	if(xpos < 150 && ypos < 50 && menu.y < 0)
		this.moveMenu = 2;
	else if(xpos < 150 && ypos > (274 - 50) && !this.menuCheckUp(menu))
		this.moveMenu = -2;
	else if(xpos < 150){
		this.manualSwitch = true;
		this.moveMenu = 0;
	}else{
		this.manualSwitch = false;
		this.moveMenu = 0;
	}
}

function setColor(colTr, val){
	colTr.greenMultiplier += val;
	colTr.redMultiplier += val;
	colTr.blueMultiplier += val;
	return colTr;
}

When we roll over a menu item we set the alpha to 1 and increase all color multipliers in order to make the menu lighter overall, mouseOutHandler will of course do the reverse, menuClick will load the “attached” banner.

The mouse move handler is the real biggie in this neighborhood. We basically check if the mouse pointer is in the top left or bottom left corner, if top then we move the menu down, if bottom we move it up. Note also the manual switch, we don’t want the “slideshow” to go on at the same time so we turn it of by way of manualSwitch.

Over to the banner loading part:

function getClip(nm:String){
	return this.p.MainImage.getChildByName(nm);
}

function loadMainPic(curUrl:String){
	
	if(this.prevMainLoader != '')
		this.getClip(this.prevMainLoader).addEventListener(Event.ENTER_FRAME, this.fadeOutHandler);
	
	var pClip 		= new MenuItem();

	p.MainImage.addChild(pClip).name = curUrl;
		
	var mItem     	= new Loader();
	mItem.alpha 	= 0;
	var urlReq    	= new URLRequest(curUrl);
	mItem.load(urlReq); 
	
	this.prevMainLoader = curUrl;
	pClip.addChild(mItem);
	pClip.addEventListener(MouseEvent.CLICK, this.mainClick);
	mItem.contentLoaderInfo.addEventListener(Event.COMPLETE, this.imageIsLoaded); 
}

function mainClick(event:MouseEvent){
	for each (var item:XML in this.bannerXml.item){
		if(item.img == event.currentTarget.name){
			navigateToURL(new URLRequest(item.imgLink), item.imgLinkTarget);
			return;
		}
	}
}

This is a kind of synthesis of loadMenuItem and switchMain for the thumbs, but now we do the banners instead.

1.) We fade out the old banner.

2.) We add the parent clip to the MainImage clip (another static clip, just like MainMenu).

3.) We initiate the loader and set its alpha to 0.

4.) We add a mouse click event handler in order to go to jump to predefined URLs (from the XML).

5.) We ad the load complete handler in order to fade in the banner after it has finished loading.

At last some less important leftovers, I’ll leave it up to you to figure out where they are called in the code listings above and what they are doing.

function fadeInHandler(event:Event):void{ 
  event.currentTarget.alpha += 0.05;
  if(event.currentTarget.alpha >= 1)
	event.currentTarget.removeEventListener(Event.ENTER_FRAME, this.fadeInHandler);
  
}

function fadeOutHandler(event:Event):void{
	var clip = event.currentTarget;
	clip.alpha -= 0.05;
	if(clip.alpha <= 0){
		clip.removeEventListener(Event.ENTER_FRAME, this.fadeOutHandler);
		p.MainImage.removeChild(clip);
	}
}

function imageIsLoaded(event:Event){
	event.target.loader.addEventListener(Event.ENTER_FRAME, this.fadeInHandler);
}

function menuFadeIn(event:Event):void{
  var clip = event.currentTarget;
  clip.transform.colorTransform =  this.setColor(clip.transform.colorTransform, 0.05);
	
  clip.alpha += 0.05;
  if(clip.alpha >= 1)
	clip.removeEventListener(Event.ENTER_FRAME, this.menuFadeIn);
  
}

function menuFadeOut(event:Event):void{
	var clip = event.currentTarget;
	if(clip.alpha <= 0.7){
		clip.alpha = 0.7;
		clip.removeEventListener(Event.ENTER_FRAME, this.menuFadeOut);
	}else{
		clip.transform.colorTransform =  this.setColor(clip.transform.colorTransform, -0.05);
		clip.alpha -= 0.05;
	}
}

function fadeOutOthers(curClip){
	for(var i = 0; i < this.menuList.length; i++){
		var tClip = this.getItem(i);
		if(tClip != curClip)
			tClip.addEventListener(Event.ENTER_FRAME, this.menuFadeOut);
	}
}

function getRandItemNum(){
	var num = Math.round(Math.random() * (this.menuList.length - 1));
	if(num == this.prevMenuNum)
		return this.getRandItemNum();
	else
		return num;
}

function menuCheckUp(menu){
	return menu.y + menu.height <= 274;
}

function moveMenuHandler(){
	var menu = this.p.MainMenu;
	if(this.menuCheckUp(menu) && this.moveMenu < 0)
		this.moveMenu = 0;
	else if(menu.y >= 0 && this.moveMenu > 0)
		this.moveMenu = 0;
	else
		menu.y += this.moveMenu;
}

function getSecs(){
	return Math.round(this.fCnt / this.p.MainMenu.stage.frameRate);
}

function getItem(num){
	return this.p.MainMenu.getChildByName( this.menuList[ num ] );
}

function getItemConf(num){
	return this.menuItems[ this.menuList[ num ] ];
}

Related Posts

• Creating Help with Flash and ActionScript3
• Menu and Banner from XML with AS3 and Flash CS3
• Simple timeline graph with Prefuse Flare
• Detecting parent URL with AS3 and jQuery - redux
• AMFPHP in Flash CS3 with AS3 - jQuery.post style

So I just got my new MX 1100 and I think it’s a great mouse, the only gripe I have with it is that it isn’t laptop friendly. That however is not Logitech’s fault. It would simply be great if there was a model that looked and felt like the MX 1100 but had the mini USB reciever and laptop snapping ability.

For you who are unfamiliar with this terminology the mini receiver is super small and you simply put it into a USB port and forget about it. Due to its minimal size you will never have to fear that it will break the port if/when the machine is handled roughly during transport. To get the mouse to snap to your laptop lid you glue a small spike to the lid which the mouse can latch on to through a small construction on its underside.

My love affair with Logitech started when I had my dad simply buy me a random mouse on his way back from work one day. He bought the Logitech V550 which has the features mentioned above; it also has the free spinning scroll wheel which I instantly came to love. Due to the fact that the wheel spins freely you simply flip it and it will scroll through huge documents without having to touch it again. It’s a massive time and energy saver whose lack of I consider to be a deal breaker for a mouse.

So what prompted me to buy the MX 1100 is the fact that it has more buttons than 2 (this is what the V550 has), I need more buttons than 2 so I can program them to do various things in different applications. The MX 1100 is also bigger and more ergonomical. However in hindsight given the importance of the mini USB and snapping I wish I had bought the Logitech VX Nano instead. It also has two extra buttons and a free spinning wheel plus the mini USB and the snapping ability.

The only thing the VX Nano doesn’t have that the MX 1100 has is the ergonomics, comfortable size and the ability to adjust pointer sensitivity on the mouse itself. However I can live without those two.

Most Popular Posts

• Joomla 1.5 Extended Registration
• Sorting with jQuery sortable
• Joomla 1.5 template design with YAML CSS Framework
• Grid edit in place with jQuery and Ajax
• MODx and YAML - from zero to finished site

What is Memcached and what is it good for?

Memcached is a very simple thing at heart; a daemon that runs in the background and that can be called from your code to store a value with the help of a key, and then retrieve said value with the help of the key used to store it; and it all happens in the RAM.

Since you can connect to Memcached from anywhere it’s easy to imagine scaling a system up by way of having separate parts being cached on different machines.

Installation

What a nightmare getting Memcached up and running on an old Dapper system. Simply doing apt-get install memcached (worked on Jaunty though) wouldn’t do it for me, apt-get complained about libevent1 as a dependency.

Luckily for me Memcached doesn’t depend on any other lib and whatever libs libevent needs (if any) were already installed.

Here is my command history:

wget http://www.monkey.org/~provos/libevent-1.4.13-stable.tar.gz
tar -xzvf libevent-1.4.13-stable.tar.gz
cd libevent-1.4.13-stable
./configure
make
make install
wget http://memcached.googlecode.com/files/memcached-1.4.4.tar.gz
tar -xzvf memcached-1.4.4.tar.gz
./configure
make
make install
nano /etc/ld.so.conf (and adding /usr/local/lib to it)
ldconfig
/usr/local/bin/memcached -d -m 512 -l localhost -p 11211 -u root
pecl install memcache

The ld.so.conf stuff is needed for Memcached to find the libevent library during runtime.

If the last pecl install line fails you probably need the same stuff you need in order to compile PHP.

Note that there is a newer fancier pecl module called memcached, pecl install memcached will therefore also work. However I couldn’t find any proper usage documentation for that one so I went with the older one. Don’t forget to edit php.ini!

The second last line will start Memcached and have it use 500MB RAM.

Implementation

My Memchache class is based on Abhinav Singh’s Memcache class. You should read his article, it’s a good one, especially at the end where you get a few other scenarios where Memcache can make your dev life easier in addition to speeding up your site.

Update: I’ve changed the original key encoding from base64_encode (like Abhinav has) to md5, base64_encode just wouldn’t work, neither is serialization needed (which he is also doing). I still recommend the end of his article though.

class Mcache extends PhModule{
	
	function __construct() {
		$this->con = new Memcache;
		$this->host = 'localhost';
		$this->port = 11211;
		$this->connect();	
	}
	
	function connect() {    
	   if($this->con->connect($this->host, $this->port))
	     return true;  
	   else{ 
	   	trigger_error("Could not connect to Memcached daemon.");
	     return false;
	   }
	}

	function flush(){
		$this->con->flush();
	}
	
	function close() { 
	   if($this->con->close())
	     return true;  
	   else
	     return false;
	}

	function query($query){
		$result = $this->getCache($query);
		if(empty($result)){
			phive()->sql()->query($q);
			$result = phive()->sql()->result();
			$this->setCache($query, $result);	
		}
		return $result;
	}
	
	function getCache($query) {
		$key = md5($query);  
		$resultset = $this->con->get($key);
		if($resultset != null)  
	 		return $resultset;  
		else
			return false;
	}
	
	function setCache($query, $resultset, $useCompression = 0, $ttl = 600){
	    $key = md5($query);   
	    if($this->con->set($key, $resultset, $useCompression, $ttl))
	      return true;  
	    else
	      return false;  
	}  
}

As you can see here the SQL class and the Memcache class are completely separate, no caching happens per default. If I would simply have my SQL class cache every result all the time it would result in too much cache purging and writing, ie. 500MB RAM wouldn’t last long which defeats the whole purpose of Memcached.

Here is an example of the class in action:

public function getFailedLoginsLastDay(){
	$sql = $this->getModule('SQL');
	$table = $this->getSetting('db_activity');
	$ip = $_SERVER['REMOTE_ADDR'];
	
	$q = "SELECT COUNT(*) FROM `$table` WHERE `ipaddress`={$sql->escape($ip)} AND
		`code`=".ACTIVITY_LOGIN_FAIL." AND `timestamp` > DATE_SUB(CURDATE(),INTERVAL 1 DAY)";
	
	if(phive()->moduleExists('Mcache'))
		return phive()->getModule('Mcache')->query($q);
	else{
		$sql->query($q);
		return $sql->result();
	}
	
	$sql->query($q);
	return $sql->result();
}

The above query took 0.3 seconds, which is now reduced to virtually nothing.

Note: If you want your site to be perfectly responsive you will need to clear all or parts of the cache when something new happens, otherwise you will end up serving hour(s) (if that is your automatic flush frequency) old content. That is of course done with the flush() method above.

Currently I’m caching a forum so as soon as someone creates a new thread or post I flush the whole cache, this indiscriminate behavior results in a lot of cache clearing which of course isn’t ideal but it’s the best I could do on short notice; it’s OK as long as the action on the forum doesn’t get too frequent, which it isn’t yet.

Related Posts

• Foreign relations with jQuery / PHP
• The basic C(R)UD
• Multiple select lists with jQuery and JSON
• Shortening multiple URLs with jQuery, PHP, picolisp and bit.ly
• Solving memory limit exhausted in PHP

Table of Contents for Simple jQuery and PHP CRUD interface

1. The basic C(R)UD
2. Foreign relations with jQuery / PHP

Well that didn’t take long, unsurprisingly. I needed the interface to handle foreign relations, for this I would’ve liked to use conventions, for instance that all primary autoincrementing keys be named id. However the legacy database I’m working with won’t allow that, so we need configuration:

$this->foreign = array(
	'user_id' => array(
		'table' => 'users', 
		'label' => 'username', 
		'fid' 	=> 'user_id'
	)
);

function foreignAttr($col_name){
	if(!empty($this->foreign[ $col_name ]))
		echo "foreign=\"$col_name\"";
}

The above will be used soon enough to get at the functionality we need. The foreign relation in this case is the user table (users) which is referenced through user_id which is also the name of its unique id column. The current table is user_points which will hold point entries containing the amount of points and a date when they were inserted.

The HTML has been slightly adjusted, we now add our own custom foreign attribute (using the above foreignAttr method):

<input class="add_input" <?php $this->foreignAttr( $row->Field ) ?> type="text" name="<?php echo $row->Field ?>"/>

Let’s move on to the jQuery:

$("#add_form").find("input").keydown(function(event){

	var cur =  $(this);

	if(cur.attr('foreign').length > 0){
		
		if($("#el_list").length == 0){
			cur.after('<select id="el_list"></select>');
			$("#el_list").blur(function(){
				var cur_id = $(this).find("option:selected").val();
				cur.val( cur_id );
				$(this).remove();
			});
		}
		
		if(cur.val().length >= 2){
			$.post(window.location.href, {value: cur.val(), func: 'getForeignList', fkey: cur.attr('foreign')}, function(res){
				res = eval( '(' + res + ')' );
				var str = '';
				$.each(res, function(){
					str += '<option value="'+this.el_id+'">'
					+ this.el_label 
					+ '</option>';
				});
				$("#el_list").html(str);
			});
		}

	}
});

We are:

1.) Checking for all key presses in input boxes in the form with id add_form.

2.) Checking to se if we have the foreign attribute detailed above.

3.) If the current input has the foreign attribute and does not have a select box right next to it we create the select box and connect a function to its blur event. The function will get the value of the currently selected option and make it the value of its “parent” input box, and then remove the whole select box as it is not needed anymore.

4.) If the text in the current input box is longer than two characters (to avoid too many hits and subsequent entries in the select box) we post (by way of AJAX) the contents and the contents of the foreign attribute to the method getForeignList.

5.) The JSON result from PHP is used to generate the options in the select box.

And the getForeignList method:

function getForeignAttr($key){
	return $this->foreign[ $_POST['fkey'] ][$key];
}

function getForeignList(){
	$table 	= $this->getForeignAttr('table');
	$label 	= $this->getForeignAttr('label');
	$sql 	= "SELECT * FROM ".$this->getForeignAttr('table')." WHERE $label LIKE '%{$_POST['value']}%'";
	$rarr 	= array();
	foreach($this->sql->loadArray($sql) as $el)
		$rarr[] = array('el_id' => $el[ $this->getForeignAttr('fid') ], 'el_label' => $el[ $label ]);
	echo json_encode($rarr);
}

Not much to add here, we run a simple SQL query to get the users whose username partially match what we just wrote in the input box and echo the JSON back.

Related Posts

• The basic C(R)UD
• Multiple select lists with jQuery and JSON
• Shortening multiple URLs with jQuery, PHP, picolisp and bit.ly
• JQuery Joomla chat, adding online/offline and friendlist
• Facebook style chat with jQuery and Joomla

Last week our host had a power outage and the backup power didn’t kick in or something. In any case, the end result was a reboot of all our servers, which went surprisingly well, except for one.

This box could not have been restarted since long before I came to the company roughly a year ago and it needed to be accessed through the emergency console. The emergency console is an extra network card or something like that that you login to the machine through if all else fails. If you need to use it you know it’s bad.

As can be inferred, networking didn’t work at all. A colleague of mine discovered that there was a line missing in /etc/networking/interfaces, a gateway was not properly assigned in the eth0 part. After fixing that and restarting networking at least the server was accessible through the normal networking and I could SSH and FTP in and backup everything.

Now the problem was name resolution, the machine continued to be inaccessible through its domain name. We still don’t know exactly what the problem was here. Simply restarting BIND didn’t work, however after making minor changes to the db.domain.com cache file, changes that themselves shouldn’t matter much, and restarting bind the problem was solved.

And then apache2 refused to start, or output any kind of error message as to why the refusal for that matter, a double whammy. After checking the apache configuration my colleague noticed that some editor (probably nano) had automatically backed up one of the virtual host files as *.save. Apache was not ignoring this file which resulted in a double record and silent death. After we deleted it everything finally worked.

Rebooting can be a mess.

Related Posts

• Being Linux admin - setting up virtual servers and Samba
• Crazy SUSE mod_rewrite problem
• XAMPP on Suse
• Solving memory limit exhausted in PHP
• Ubuntu 9.10 (Karmic Koala) 64bit on a SONY VAIO AW11Z

Table of Contents for Simple jQuery and PHP CRUD interface

1. The basic C(R)UD
2. Foreign relations with jQuery / PHP

I recently made a very simple but functional administrational interface using jQuery and Ajax to avoid having to refresh the page all the time thus simplifying development.

The only convention/requirement here is that any database table that uses the interface has a unique id column aptly named id.

Let’s start with adding stuff:

Add:
<form action="<?php echo 'http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] ?>" method="POST">
	<table>
		<tr>
			<?php foreach($struct as $row): ?>
				<?php if($row->Field != "id"): ?>
					<th><?php echo ucfirst($row->Field) ?></th>
				<?php endif ?>
			<?php endforeach ?>
		</tr>
		<tr>
			<?php foreach($struct as $row): ?>
				<?php if($row->Field != "id"): ?>
					<td><input class="add_input" type="text" name="<?php echo $row->Field ?>"/></td>
				<?php endif ?>
			<?php endforeach ?>
			<td> <input type="submit" id="add_submit" value="Save"> </td>
		</tr>
	</table>
	<input type="hidden" name="post_action" value="insert"/>
</form>

The insert/add form is using automatically generated meta information in the $struct array of objects. This information is used to generate column headlines but more importantly to automatically assign a name to each input field.

Let take a look at the PHP/MySQL behind this:

if(!empty($_POST['post_action'])){
	$func = $_POST['post_action'];
	unset($_POST['post_action']);
	$this->$func();
}

function insert(){
	echo "insert";
	$this->sql->insertArray($this->table(), $_POST);
}

$struct = $this->sql->loadObjects("SHOW COLUMNS IN ".$this->table());

We have a check for the presence of post_action in the POST array if we have it we use its value to call that function in the current class ($this->$func();), one of a select few nifty features of PHP.

If the post_action is insert we simply call insert() above which in turn makes use of a class called SQL which is outside the scope of this tutorial. Suffice to say that insertArray will build a MySQL insert query from the contents of the array and execute it.

A simple SHOW COLUMNS query, very handy in these cases when you need to create interfaces automatically.

Editing is the hardest part because we do it on a per cell basis, we don’t submit the whole row. Therefore we need to keep track of both row id and name, ie. the $key-$id combo below where $key is the field name and the $id the unique id of the row.

Edit:
<table id="jform_table">
	<?php foreach($rows as $id => $row): ?>
		<tr id="row-<?php echo $id ?>" >
			<?php foreach($row as $key => $val): ?>
				<?php if($key != 'id'): ?>
					<td> <input id="<?php echo "$key-$id" ?>" type="text" value="<?php echo $val ?>" /> </td>
				<?php endif ?>
			<?php endforeach ?>
			<td> 
				<form action="<?php echo 'http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] ?>" method="POST">
					<input type="submit" id="delete_submit" value="Delete">
					<input type="hidden" name="post_action" value="delete"/>
					<input type="hidden" name="row_id" value="<?php echo $id ?>"/>
				</form> 
			</td>
		</tr>
	<?php endforeach; ?>
</table>

The javascript making all of this happen:

$(document).ready(function(){
	$("input").keydown(function(event){
		if(event.keyCode == 13){
			var field_id = $(this).attr("id").split("-");
			$.post(window.location.href, {field: field_id[0], id: field_id[1], val: $(this).val()});
		}
	});
});

So as soon as we are editing a field we look for return key press, if we get it we post the value to the same url that generated the form. We submit the field name (field_id[0]) and the row id (field_id[1]) which we obtain by splitting the key-id combo.

So before we render the HTML we have the following check somewhere in the PHP code:

if(!empty($_POST['id'])){
	$this->sql->query("UPDATE ".$this->table()." SET {$_POST['field']} = '{$_POST['val']}' WHERE id = {$_POST['id']}");
	echo "ok";
	exit;
}

If the POST global contains the id key we know we have an update request on our hands so we use the POST information to update the row.

As you could see above we also have a delete form attached to each row which upon submission will delete said row. This is not by way of Ajax and there is no JavaScript involved, hence each submit will refresh the page. Note that we submit to the same PHP script that generated the form yet again, all this stuff is self-contained in the same document.

Related Posts

• Multiple select lists with jQuery and JSON
• Facebook style information box with jQuery
• Integrating with jQuery - Adding Pagination
• Multiple uploads with jQuery and Flex or Flash
• jQuery Drag and Drop to sort Tree

It seems we’re having some problems with Wikipedia when it comes to creating a entry for PicoLisp there.

This prompted Alex Burger (the language creator) to write the following on the mailing list:

Besides this, I’m extremely frustrated. I think I wasted too much time
on communicating (instead of using) PicoLisp during the last 8 years.

From now on I’ll concentrate on my own work. I won’t write any articles,
or propagate PicoLisp in any way. I’ll answer questions in this mailing
list, though.

Well as long as you’re active on the list I’m happy

Putting Wikipedia and other places aside, apart from personally enjoying helping people what could motive a language creator to help adoption (not counting pride and glory)?

Financial gain of course, in mainly the following areas:
1.) Creation of libraries that will help him in his own endeavors, thus minimizing his own workload.
2.) Successful projects using the language might need his professional help.
3.) When other people gain more knowledge they might be inclined to help other people, thus offloading the creator.
4.) The derivative effect, ie the persons he is helping might induce someone else to actually accomplish #1, #2 or #3.

With that in mind what could maximize the chances of either #1 or #2 happening, or otherwise getting across the threshold when the language creator can simply sit back and watch the popularity accelerate without much further effort on his part?

Helping people like me on IRC must be one of the least effective ways (although very nice for me), the mailing list is orders of magnitudes better since the information stays out there for all to see.

Having an entry on Wikipedia would unfortunately lend a lot of credibility for people who are shopping around for a new language to learn. As it happens it seems Alex managed in the end anyway because the article seems to be there now (although if not more secondary sources are added it risks being deleted in the future apparently).

If the goal is to popularize PicoLisp what might be the way forward from here then? Looking at Python and Ruby I see two popular web development frameworks, Django and Rails. Especially in Ruby’s case the Rails framework has been instrumental in that language’s popularity.

As it happens PicoLisp has its own web development framework but it has everything to do with database administration and very little to do with the kind of problems a normal web developer faces in his/hers daily work of working mostly with a mix of administrative interfaces and content distribution and presentation.

So that’s what I intend to do, an alternative more general web development framework in PicoLisp, I just need to get a handle of a few more aspects of PicoLisp in particular and Linux in general, so hang in there Alex!

Another thing that’s somewhat missing is more library functions for performing common tasks, it should be easier to create than in many other languages though since getting stuff done in Lisp is easy.

Finally, without a lot of good documentation a language will get nowhere no matter how good it is. As it happens as of PicoLisp 3.0.1 the reference is now better than ever. Parts of it will still seem cryptic to beginners but a new wiki is in the works.

I think 2010 will be a very interesting year for PicoLisp.

Related Posts

• Shortening multiple URLs with jQuery, PHP, picolisp and bit.ly
• The ugliest LISP in the world
• Pilog solve and the +Aux relation
• Pico Lisp and JSON
• Explicit scope resolution in Pico Lisp

This tutorial will all be about managing loading data into multiple select lists and then save the selections in the list.

There will be two multiple selects, one with a list of sites that will display a selection of partners, when a site is selected in the single select list the partners that have previously been mapped to it will automatically be selected in the multi select box listing them.

Let’s start with JS code working on a select box with the id partner_sites:

$(document).ready(function(){
	$("#partner_sites select option").click(function(){
		var siteId = $(this).val();
		$.post(window.location.href, {func: "jsonSitePartners", site_id: siteId}, function(res){
			var partners = $.evalJSON(res);
			if(partners.length > 0){
				$("#partners_list").find("option").attr("selected", false);
				$.each(partners, function(){
					$("#partners_list").find("option[value='"+this.partner_id+"']").attr("selected", true);
				});
			}else
				$("#partners_list").find("option").attr("selected", false);
		});
	});
});

When we click a site the following happens:
1.) We get the site’s id, it is in the clicked option’s value.

2.) We call a PHP method (which will be described shortly) called jsonSitePartners by way of AJAX, and we pass it the selected site’s id.

3.) We will now get a list of partners in the form of a JSON string which we will evaluate with the help of JQuery JSON.

4.) We now have our partners as JavaScript objects in an array which we can loop through with the jQuery utility function each.

5.) During each loop we try and find an option containing each partner’s id in its value attribute, if we find one we select it, if not we unselect it, the reason for doing that is that any partner might have been selected already since we might have clicked another site before the currently clicked site. An alternative could have been to first unselect all partner options before we started looping with each.

function jsonSitePartners(){
	$partners = array();
	foreach($this->getSitePartners($_POST['site_id']) as $partner)
		$partners[] = array('full_name' => $partner->full_name, 'partner_id' => $partner->partner_id);
	echo json_encode($partners);
}

Not much to add here, getSitePartners will query a linktable linking partners and sites for all partners belonging to the current site. After that we do some filtering which really should have been done in the MySQL query but that’s life sometimes when you work with other people’s code, you’re bound to get technical debt because you are either 1) too scared to change things for fear of breaking something else or 2) too lazy.

function savePartners(){
	var partner_ids	= [];
	var siteId = $("#partner_sites select option:selected").val();
	$("#partners_list option").each(function(){
		if($(this).attr('selected'))
			partner_ids.push( $(this).val() );
	});

	$.post(window.location.href, {func: "saveSitePartners", site_id: siteId, ids: $.toJSON(partner_ids)});
	$("#msgs").html("Partners saved.");
}

So after we have successfully selected all the current partners of our site and then some more, or removed some maybe, we need to be able to save them. To do that we need two things, the ids of the partners we want to map to the currently selected site and of course the id of the currently selected site.

The id of the site can be had by checking which of the options in the site single select list has been selected. Next we loop through the partners and store all the ids of selected partners in an array.

Finally we JSON encode and AJAX post everything to a PHP method called saveSitePartners:

function saveSitePartners(){
	$ids = json_decode($_POST['ids']);
	$this->sql->query("DELETE FROM partners_site WHERE partner_id IN(".implode(',', $ids).")");
	foreach($ids as $pid)
		$this->sql->insertArray('partners_site', array('partner_id' => $pid, 'site_id' => $_POST['site_id']));
	echo "ok";
}

First we decode the JSON and then we can use the fact that we now have an array by using implode on it with the help of a comma as glue, the result is something that can be used in the IN() SQL method, an often used “trick” of mine.

First we delete all partners belonging to the currently selected site from the link table, then we proceed by inserting them one by one, yet again not very clever since we’re doing repeat queries but this will not be a common operation so we can afford to be somewhat slow here.

Related Posts

• jQuery Drag and Drop to sort Tree
• The basic C(R)UD
• Shortening multiple URLs with jQuery, PHP, picolisp and bit.ly
• Facebook style information box with jQuery
• Integrating with jQuery - Adding Pagination

Small tag stripping jQuery plugin:

jQuery.fn.stripHTML = function() { 
  return this.each(function(){ 
    var me   = jQuery(this); 
    var html = me.html(); 
    me.html(html.replace(/<[^>]+>/g, "").replace(/<\/[^>]+>/g, ""));
  }); 
}

If the code is HTML encoded it needs to first be HTML decoded.

A usage example could look like this:

$(".article_title").decHTML().stripHTML();

Related Posts

• Facebook style chat with jQuery and Joomla
• jQuery UI draggable and resizable combination
• jQuery plugin - HTML decode and encode
• Adding search with jQuery and Check Boxes
• jQuery Treeview with MODx Wayfinder