<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Paul Richards</title>
	<atom:link href="http://www.paulsrichards.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.paulsrichards.com</link>
	<description>Web Developer</description>
	<lastBuildDate>Sat, 02 Apr 2011 11:58:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>How to install backup-manager on Fedora and configure Amazon S3</title>
		<link>http://www.paulsrichards.com/2011/04/02/how-to-install-backup-manager-on-fedora-and-configure-amazon-s3/</link>
		<comments>http://www.paulsrichards.com/2011/04/02/how-to-install-backup-manager-on-fedora-and-configure-amazon-s3/#comments</comments>
		<pubDate>Sat, 02 Apr 2011 11:57:53 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[linux]]></category>
		<category><![CDATA[backup]]></category>

		<guid isPermaLink="false">http://www.paulsrichards.com/?p=277</guid>
		<description><![CDATA[You may of noticed that installing backup-manager on Fedora (I&#8217;m using oldish version 9) isn&#8217;t that straight forward, particularly if you want to back up to Amazon S3. It took my a bit of messing around on how to do it so I thought it was worth sharing how I did it. Note that if]]></description>
			<content:encoded><![CDATA[<p>You may of noticed that installing backup-manager on Fedora (I&#8217;m using oldish version 9) isn&#8217;t that straight forward, particularly if you want to back up to Amazon S3. It took my a bit of messing around on how to do it so I thought it was worth sharing how I did it. Note that if you wish not to use Amazon S3 once its installed your all done.</p>
<h3>Installing Backup-Manager</h3>
<p>Download the RPM to your server</p>
<pre>$ wget ftp://ftp.pbone.net/mirror/archive.fedoraproject.org/fedora/linux/updates/9/ppc.newkey/backup-manager-0.7.8-1.fc9.noarch.rpm</pre>
<p>If the link gets broken at some point there is a load more here <a href="http://rpm.pbone.net/index.php3/stat/4/idpl/13697398/dir/fedora_9/com/backup-manager-0.7.8-1.fc9.noarch.rpm.html" target="_blank">http://rpm.pbone.net/index.php3/stat/4/idpl/13697398/dir/fedora_9/com/backup-manager-0.7.8-1.fc9.noarch.rpm.html</a>. If you use a different Fedora version you can find the correct RPM here.</p>
<p>You can install this now with</p>
<pre>$ rpm -ivh backup-manager-0.7.8-1.fc9.noarch.rpm</pre>
<p>If you dont need Amazon S3 to work your all done at this point.</p>
<h2>Amazon S3</h2>
<p>If you run it at this point your get the error message:</p>
<pre>The upload transfer "s3" failed.</pre>
<p>You must install 2 more packages that it doesn&#8217;t tell you about.</p>
<p>Do the following under root</p>
<pre><code>$ yum search perl-File-Slurp</code></pre>
<pre><code>$ yum install perl-File-Slurp.noarch</code></pre>
<p>Now one more package</p>
<pre><code>$ yum search perl-Net-Amazon-S3</code></pre>
<pre><code>$ yum install perl-Net-Amazon-S3.noarch</code></pre>
<p>And now you can configure your conf:</p>
<pre>nano /etc/backup-manager.conf</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.paulsrichards.com/2011/04/02/how-to-install-backup-manager-on-fedora-and-configure-amazon-s3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ubuntu SABnzbd+ behind an apache2 proxy</title>
		<link>http://www.paulsrichards.com/2010/10/05/ubuntu-sabnzbd-behind-an-apache2-proxy/</link>
		<comments>http://www.paulsrichards.com/2010/10/05/ubuntu-sabnzbd-behind-an-apache2-proxy/#comments</comments>
		<pubDate>Tue, 05 Oct 2010 08:14:35 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Apache]]></category>
		<category><![CDATA[Web Tools]]></category>
		<category><![CDATA[apache]]></category>
		<category><![CDATA[sabnzb]]></category>
		<category><![CDATA[ubuntu]]></category>

		<guid isPermaLink="false">http://www.paulsrichards.com/?p=264</guid>
		<description><![CDATA[This is a guide on how to replace your ugly sabnzbd url to something nice looking thats easier to remember. Currently the standard url will run on the port 8080 unless you&#8217;ve changed it. You could just change it to port 80 to make a nice url but more likely you already run apache on]]></description>
			<content:encoded><![CDATA[<p>This is a guide on how to replace your ugly sabnzbd url to something nice looking thats easier to remember. Currently the standard url will run on the port 8080 unless you&#8217;ve changed it. You could just change it to port 80 to make a nice url but more likely you already run apache on that port.</p>
<p>Example old url</p>
<p><strong>http://myserver.com:8080/sabnzbd/</strong></p>
<p>New url</p>
<p><strong>http://sab.myserver.com</strong></p>
<p>Assuming you already have apache installed you need to make sure you have the following mod&#8217;s installed and enabled.</p>
<pre lang="Apache configuration">a2enmod proxy
a2enmod proxy_http
a2enmod proxy_html</pre>
<p>Now you have these installed and enabled you have to created a new vhost entry that will point your chosen server name to your oringal sabnzbd url.</p>
<pre lang="Apache configuration">

<VirtualHost *:80>

        ServerName sab.myserver.com
        ProxyPass / http://localhost:8080/
        ProxyPassReverse / http://localhost:8080/

</VirtualHost>
</pre>
<p>And thats it! reboot your apache server and your done, you can now access via the new url. I would also stronlgly recommend you enable the password protection in your sabnzb configuration.</p>
<p><strong>References</strong></p>
<p><a href="http://diginc.us/2009/02/ubuntu-sabnzbd-protected-by-an-apache2-proxy-and-htpasswd/" target="_blank">http://diginc.us/2009/02/ubuntu-sabnzbd-protected-by-an-apache2-proxy-and-htpasswd/</a></p>
<p><a href="http://artur.hefczyc.net/node/10" target="_blank">Client denied by server configuration error in Apache</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.paulsrichards.com/2010/10/05/ubuntu-sabnzbd-behind-an-apache2-proxy/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Root your 3UK branded HTC Desire, 1.22.771.1, add custom recovery</title>
		<link>http://www.paulsrichards.com/2010/08/07/root-your-3uk-branded-htc-desire-1227711-add-custom-recovery/</link>
		<comments>http://www.paulsrichards.com/2010/08/07/root-your-3uk-branded-htc-desire-1227711-add-custom-recovery/#comments</comments>
		<pubDate>Sat, 07 Aug 2010 10:30:57 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[android]]></category>
		<category><![CDATA[froyo]]></category>
		<category><![CDATA[htc desire]]></category>

		<guid isPermaLink="false">http://www.paulsrichards.com/?p=208</guid>
		<description><![CDATA[This is a quick guide on how to root your 3 (three UK) branded HTC Desire and add a custom recovery if you wish to load custom roms. Before we start here are some details about my phone which i did this process on: HTC Desire simlock to 3 UK Software version 1.22.771.1 HBOOT 0.80.0000]]></description>
			<content:encoded><![CDATA[<h2>This is a quick guide on how to root your 3 (three UK) branded HTC Desire and add a custom recovery if you wish to load custom roms.</h2>
<p>Before we start here are some details about my phone which i did this process on:</p>
<ul>
<li>HTC Desire simlock to 3 UK</li>
<li>Software version 1.22.771.1</li>
<li>HBOOT 0.80.0000</li>
<li>Did this on Windows 7</li>
</ul>
<p>You have 3 choices on what you can do here:</p>
<ol>
<li>Put a custom recovery on it to flash any rom you like</li>
<li>Gain root access your current Eclair 2.1 (and a custom recovery if you like)</li>
<li>Upgrade it to offical Froyo 2.2</li>
</ol>
<p>First we  must &#8216;debrand&#8217; our phone, this is a process where we load a generic rom that shipped with the sim-free Desires. These are all version 1.21.x all of which contain ways to root the phone. If you read up on how to root these phones you notices it says &#8216;this only works if you have 1.21.x or below), well the goal of this to downgrade to that lower number.</p>
<p><strong>PLEASE READ EVERYTHING CAREFULLY I CANNOT BE RESPONSIBLE FOR BROKEN PHONES.</strong></p>
<p>Create a &#8216;gold card&#8217;  &#8211;  A GoldCard is a special SD card which, when inserted into your device,  allows you to flash RUU files with a different CID to your own device. So we own a 3UK branded device, this will allow you  to flash a generic ROM.</p>
<p><em>Requirements</em></p>
<ul>
<li>Spare microSD card</li>
<li>Windows PC (recommended)</li>
<li>ADB (part of the tools folder of the SDK, available for download <a href="http://developer.android.com/sdk/index.html" target="_blank">here</a></li>
<li>HxD Hex Editor, available for download <a href="http://mh-nexus.de/en/downloads.php?product=HxD" target="_blank">here</a></li>
</ul>
<p><em>Step by step instructions</em></p>
<ul>
<li>Format the microSD card to FAT32 format.</li>
<li>Put the microSD card in your device and boot it.</li>
<li>Ensure you have unzipped the SDK, then open a command prompt to the extract location. Change to the &#8216;tools directory.</li>
<li>Enter  &#8216;adb shell cat /sys/class/mmc_host/mmc1/mmc1:*/cid&#8217; and press enter.  You should get a very long number which looks like this:  532600bd227d9c0347329407514d5402.</li>
<li>Visit <a href="http://hexrev.soaa.me/" target="_blank">this page</a>, paste in your number and reverse it. In our example the result would be 00544d5107943247039c7d22bd002653.</li>
<li>Visit <a href="http://psas.revskills.de/?q=goldcard" target="_blank">this page</a>, enter your reversed number and create your goldcard image, which will be e-mailed to you.</li>
<li>Open the HxD hex editor. If you are using Windows Vista or Windows 7, you must run the application as administrator.</li>
<li>Go  to the &#8216;Extra&#8217; menu and select &#8216;Open Disk&#8217;. Under physical disk, select  Removable Disk (your microSD card), uncheck &#8216;Open as Readonly&#8217; and  click OK. Note that you should select physical disk NOT the logical  disk. This is important!</li>
<li>Go to the &#8216;Extra&#8217; menu again and select &#8216;Open Disk Image&#8217;. Open the goldcard image that you received by email.</li>
<li>You  should now have two tabs &#8211; one is your removable disk, the other is  your goldcard image. Press OK when prompted for &#8216;Sector Size&#8217; (selecting  512 (Hard disks/Floppy disks)) and click OK.</li>
<li>Click on the goldcard image tab. Go to the &#8216;Edit&#8217; menu, choose &#8216;Select All&#8217; then select the &#8216;Edit&#8217; menu again and select &#8216;Copy&#8217;.</li>
<li>Click  on the &#8216;Removable Disk&#8217; tab. Highlight offset (line) 00000000 to offset  (line) 00000170 (including the 00000170 line), then click on the &#8216;Edit&#8217;  menu and select &#8216;Paste Write&#8217;.</li>
<li>Click on the &#8216;File&#8217; menu and select &#8216;Save&#8217;, accepting the warning.</li>
</ul>
<p>Ok here the bit that differs for us 3UK branded people. If you have a branded handset other then 3UK at this point you run a gernic <a href="http://htcpedia.com/forum/showthread.php?t=2907" target="_blank">RUU found here</a>. 3UK owners must go through a couple more steps.</p>
<p>Download the unrevoked3 rooting package from here <a href="http://paulsrichards.com/files/downloads/desire-rooting/reflash_package.exe">http://paulsrichards.com/files/downloads/desire-rooting/reflash_package.exe</a> (the one i used) or download it from <a href="http://unrevoked.com/#desire" target="_blank">http://unrevoked.com/#desire</a>. This software will flash a custom recovery onto your phone. If your having driver problem ensure you follow the instructions that come with it properly. It has its own set for bootloader that it must use. If you having issues with the program finding your desire, try plugging in the desire before you load the program (even though it says not to do this). I had to do that to get it to work. Note that it loads a default recovery you can change this by clicking the file menu, i did this and used <a href="http://paulsrichards.com/files/downloads/desire-rooting/recovery-RA-desire-v1.7.0.1-R5.img">recovery-RA-desire-v1.7.0.1-R5.img</a> found <a href="http://forum.xda-developers.com/showthread.php?t=721792" target="_blank">here</a>. As i&#8217;ve rooted a Magic and Hero in the past i felt more at home with that one.</p>
<p><strong>NOTE THIS PROCESS WILL COMPLETLY WIPE OUT YOUR PHONE  &#8211; ENSURE YOU HAVE IT BACKED IT UP. </strong></p>
<p>Ok now you can get into your new custom recovery by turning off the phone, hold the back button + the power. Select &#8216;BOOTLOADER&#8217; then &#8216;RECOVERY&#8217;. It will then reboot to recovery.</p>
<p>Now at this point you can say the hard work is done and load a custom ROM which is Froyo 2.2 offical. I&#8217;ve currently got &#8216;Rooted Official HTC Android 2.2 (FroYo) ROM&#8217; from <a href="http://forum.xda-developers.com/showthread.php?t=741775" target="_blank">here (look around on XDA there are loads to try out)</a>. And away you go offical 2.2 on your phone.</p>
<p>But you can carry on and do it the other way (i&#8217;m not sure why you would want to do that now but here goes).</p>
<p>Place <a href="http://paulsrichards.com/files/downloads/desire-rooting/update.zip">this zip</a> (<a href="http://android.modaco.com/content/htc-desire-desire-modaco-com/309939/usb-brick-rickrolled-b0rked-fixed/">found here for ref</a>) on your Sd card and &#8216;Flash a Zip&#8217; in recovery.</p>
<p>Now your phones thinks its an older version then it is. Download a gernic unbranded <a href="http://htcpedia.com/forum/showthread.php?t=2907" target="_blank">RUU found here.</a></p>
<p>Possible problems</p>
<ul>
<li>When running RUU it reboots into BOOTLOADER and cant find the phone &#8211; turn on your phone as normal, plug it in with USB debugging mode on, with the SDK run on the command line &#8216;adb reboot oem-78&#8242;. Then it will go into the mode the RUU whats it to, then check all the drivers are ok in the &#8216;Hardware Devices&#8217; in my computer.It should say &#8216;HTC Bootloader&#8217;. Then while in that mode run the RUU.</li>
<li>If you get while in RUU &#8216;Wrong CUSTOMER ID&#8217; &#8211; you gold card is bad, do it again.</li>
<li>If you get while in RUU &#8216;BOOTLOADER VERSION INCORRECT&#8217; &#8211; you haven&#8217;t flashed the update.zip properly.</li>
</ul>
<p>Easy! you know have a downgrade phone!</p>
<p>Now to root it you can do the following <a href="http://forum.xda-developers.com/showthread.php?t=696189">(guide from XDA</a>):</p>
<p><strong>NOTE</strong>: for step one it depends which generic RUU you decided to put on, please check what you got by going into HBOOT (power off, back button + power).</p>
<ol style="list-style-type: decimal;">
<li>Download Tiny Core Linux Live CD<br />
&#8212;- For a bootloader of 0.75.* or lower <strong>AND</strong> a current ROM of 1.15.* or lower<a href="http://www.multiupload.com/6F8U7TIWJC" target="_blank"> <strong>Download</strong></a><br />
&#8212;- For a bootloader of 0.80.* or lower <strong>AND</strong> a current ROM of 1.21.* or lower<a href="http://www.multiupload.com/SJ7SB8US6S" target="_blank"> <strong>Download</strong></a><strong> </strong><a href="http://www.multiupload.com/SJ7SB8US6S" target="_blank"><strong><br />
</strong></a></li>
<li>Burn the downloaded iso on CD/DVD</li>
<li>Boot your computer from that CD/DVD, once you booted it will ask you to press Enter or F2/F3 keys, you need to press Enter</li>
<li>Insert the goldcard into the phone.</li>
<li>Start the HTC Desire in bootloader by holding back and turning it on by the power button</li>
<li>Connect the USB cable to the phone and PC</li>
<li>Open a terminal by clicking the icon that looks like a monitor at the bottom on Tiny Core Linux and type the following commands:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">Code:</div>
<pre language="bash">sudo mkdir /mnt/cdrom
sudo mount /dev/cdrom /mnt/cdrom
cd /mnt/cdrom/desire
sudo ./step1.sh</pre>
</div>
</li>
<li>Wait until the phone restarts back into the white bootloader screen</li>
<li>Turn the phone off via the bootloader menu (or pull the battery and  USB cable) and remove the goldcard. Put a non-goldcard SD into the phone  or reformat the goldcard and put it into the phone. Put the phone back  into bootloader mode (Press Power button and Back button).</li>
<li>In terminal type the following command:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">Code:</div>
<pre language="bash">sudo ./step2.sh</pre>
</div>
</li>
<li>Once the phone has finished, you will see a screen with a  green text. Use the optical tracker to navigate the menu to select Wipe  and then press Wipe data/factory reset</li>
<li>Once complete you should be back in the main menu. Now select the option Flash zip from sdcard and than choose rootedupdate.zip</li>
<li>Once back in the main menu, choose restart the phone &#8211; the rooting process is now finished</li>
</ol>
<p><strong>IF YOU WISH TO UPGRADE TO OFFICAL FROYO DO THIS BUT IT WILL UNROOT YOUR PHONE AND MAY MAKE IT SO CAN NEVER ROOT IT AGAIN. I WOULD SUGGEST YOU DO WHAT I DID ABOVE</strong></p>
<p>(guide is from <a href="http://www.mikesouthby.co.uk/2010/08/htc-desire-updating-to-froyo-official-ota-for-network-branded-handsets/comment-page-3/#comment-6197">here</a>)</p>
<p>Next you need to download the FroYo update file which you can find <a title="http://liveimage.htc.com/OTA_Bravo_Froyo_HTC_WWE_2.09.405.8-1.21.405.2_release4dua3bcrut4wrv30.zip" href="http://liveimage.htc.com/OTA_Bravo_Froyo_HTC_WWE_2.09.405.8-1.21.405.2_release4dua3bcrut4wrv30.zip" target="_blank">here</a> [<a title="http://www.mediafire.com/?8f18q5gwtbc8mym" href="http://www.mediafire.com/?8f18q5gwtbc8mym" target="_blank">Mirror</a> - <em>the file has already been renamed to update.zip</em>],  once you have done this rename the file update.zip and copy it to the  root of your microSD.  Turn your phone off then do the following:</p>
<ul>
<li>Turn your phone on whilst holding down the <em>volume down</em> button to enter the HBoot menu</li>
<li>Choose the <em>Recovery</em> option by using the <em>volume down</em> button and the <em>power button</em> to select, your phone should then restart in recovery mode where you’ll be greeted with a red triangle and exclamation mark</li>
<li>Press and hold the <em>volume up</em> button and press the <em>power button</em> once, then choose to <em>apply update.zip</em> at the next menu</li>
<li>The FroYo update will now take place during which time your phone  will reboot several times, the whole process takes about 10 minutes</li>
<li>Once you have booted up into FroYo and configured your settings,  copy your files back onto your microSD card and you are good to go!</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.paulsrichards.com/2010/08/07/root-your-3uk-branded-htc-desire-1227711-add-custom-recovery/feed/</wfw:commentRss>
		<slash:comments>65</slash:comments>
		</item>
		<item>
		<title>Zend Server vs Xampp</title>
		<link>http://www.paulsrichards.com/2009/02/27/zend-server-vs-xampp/</link>
		<comments>http://www.paulsrichards.com/2009/02/27/zend-server-vs-xampp/#comments</comments>
		<pubDate>Fri, 27 Feb 2009 18:31:19 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Web Tools]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[zend]]></category>

		<guid isPermaLink="false">http://www.paulsrichards.com/?p=173</guid>
		<description><![CDATA[Now that Zend Server has had its public beta release I thought it was finally worth a installation to see what its all about. One of the main differences between this and xampp that jumped out at me was there was a Mac version to download along side Linux (rpm and dem) and Windows. There]]></description>
			<content:encoded><![CDATA[<p>Now that Zend Server has had its public beta release I thought it was finally worth a installation to see what its all about. One of the main differences between this and xampp that jumped out at me was there was a Mac version to download along side Linux (rpm and dem) and Windows. There will be two version of the product to be called the &#8216;Community Edition&#8217; and the standard commercial version. The commercial version comes with monitoring capabilities and additional Zend modules (page cache and data cache).</p>
<p>After the initial download of around 50mb for windows with comes with a nice installer to take care of everything. It then I realised I hadn&#8217;t downloaded everything yet and more modules need to be added before installing such as MySQL. There was also other option like a Java Bridge, Zend Framework (with or without dojo) and various other database adaptors.</p>
<p>After a 5 minutes everything was done. The apache web service monitor appeared which confirmed it was running. Icons now appeared in my program folder so I went ahead and click on &#8216;Zend Service&#8217;. Also worth noting that it also had Links to apache, MySQL service programs and to the htdocs.</p>
<p>Up loaded a web page taking me to the control panel. Everything looked a bit more flashy and provided similar links as xampp to phpmyadmin, a phpinfo file and the status of various services. You are reminded in various places that you only have the free version which is a little irritating. With the links provided you have easy access to the root folder and setting up passwords on MySQL.</p>
<p>Its really done exactly what it said it would do and i encountered no problems installing it. Less experienced users may bit a little confused when it comes choosing which components to install. It does however lack some features that xampp comes with such as SQLite and perl. There is also no centralised management tool like the xammp control panel to easily start and stop apache and MySQL. This is a real shame as this just makes xampp so easy to use.</p>
<p><span style="text-decoration: underline;"><strong>Related links</strong></span></p>
<p><a title="Zend Server" href="http://www.zend.com/en/products/server/downloads" target="_blank">http://www.zend.com/en/products/server/downloads</a></p>
<p><a href="http://devzone.zend.com/article/4272-Zend-announces-public-beta-of-a-new-product-Zend-Server" target="_blank">http://devzone.zend.com/article/4272-Zend-announces-public-beta-of-a-new-product-Zend-Server</a></p>
<p><a href="http://www.apachefriends.org/en/xampp.html" target="_blank">http://www.apachefriends.org/en/xampp.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.paulsrichards.com/2009/02/27/zend-server-vs-xampp/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>No more re-binding with jQuery 1.3</title>
		<link>http://www.paulsrichards.com/2009/01/26/no-more-re-binding-with-jquery-13/</link>
		<comments>http://www.paulsrichards.com/2009/01/26/no-more-re-binding-with-jquery-13/#comments</comments>
		<pubDate>Mon, 26 Jan 2009 12:34:35 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.paulsrichards.com/?p=163</guid>
		<description><![CDATA[With the release of the jQuery 1.3 on the 24th Janurary 2009 see&#8217;s the new feature called &#8216;Live Events&#8217;. This goes some way to solve the jQuery problem of creating dom elements on the fly which then have no events bound. Then your normally required to rebind any event handlers to them, resulting another potential]]></description>
			<content:encoded><![CDATA[<p>With the release of the <a title="jQuery 1.3 released" href="http://blog.jquery.com/2009/01/14/jquery-13-and-the-jquery-foundation/">jQuery 1.3 on the 24th Janurary 2009</a> see&#8217;s the new feature called &#8216;Live Events&#8217;. This goes some way to solve the jQuery problem of creating dom elements on the fly which then have no events bound. Then your normally required to rebind any event handlers to them, resulting another potential large layer of complexity to your code.</p>
<p>Well with Live Events this is no longer required (well for some events anyway). By creating a event handler through a via Live Event it bounds all current and future elements. This gives you the advantage of not having to repeat the events handlers. Some events are excluded: blur, focus, mouseenter, mouseleave, change, submit. Fortunately the most common ones are supported and no doubt all will be supported in the future.</p>
<p><a href="http://docs.jquery.com/Events/live">jQuery Live Events Doc</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.paulsrichards.com/2009/01/26/no-more-re-binding-with-jquery-13/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery plugin: popmenu</title>
		<link>http://www.paulsrichards.com/2008/10/01/jquery-plugin-popmenu/</link>
		<comments>http://www.paulsrichards.com/2008/10/01/jquery-plugin-popmenu/#comments</comments>
		<pubDate>Wed, 01 Oct 2008 09:46:26 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[jquery]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.paulsrichards.com/?p=155</guid>
		<description><![CDATA[popmenu is a jQuery plugin that allows you to create simple &#8216;pop-up&#8217; menu&#8217;s like which appear on web sites like play.com. It is currently being used at ikonsports.com. It has similar functionality jQuery&#8217;s hover(over, out) but with a few more options specifically geared towards pop up menus. Most importantly it will continue to match an]]></description>
			<content:encoded><![CDATA[<p><strong>popmenu </strong>is a jQuery plugin that allows you to create simple &#8216;pop-up&#8217; menu&#8217;s like which appear on web sites like play.com. It is currently being used at <a title="Link to Ikonsports.com" href="http://www.ikonsports.com" target="_blank">ikonsports.com</a>.</p>
<p>It has similar functionality jQuery&#8217;s hover(over, out) but with a few more options specifically geared towards pop up menus. Most importantly it will continue to match an element that you want to appear when you move off the mouse original element and on to any new element, where ever its located in the DOM.</p>
<h2>Parameters</h2>
<p><strong>target (DOMElement):</strong> This is the element that is to &#8216;appear&#8217; when the hover event is called.<br />
<strong>addStyle (string): </strong>Optional. Adds a class to the matched element on hover (of matched element and target). Removed on hover off.<br />
<strong>time (int):</strong> Optional. Time in milliseconds after a hover off when <strong>target</strong> element is invisible.<br />
<strong>speed (String|Number</strong><strong>): </strong>Optional. A string representing one of the three predefined speeds (&#8220;slow&#8221;, &#8220;normal&#8221;, or &#8220;fast&#8221;) or the number of milliseconds to run                            the animation displaying the <strong>target</strong> (e.g. 1000).<br />
<strong>autooff (boolean): </strong>Optional. Default is true. If turned on will automatically hide any <strong>target</strong> elements if visible when a different popmenu is triggered. For example if you pop up menu&#8217;s would overlap if they were both visable at the same time it will hide it first.</p>
<h2>Example</h2>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#mybutton'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">popupmenu</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				target<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#mybutton_menu&quot;</span><span style="color: #339933;">,</span>
				time<span style="color: #339933;">:</span> <span style="color: #CC0000;">300</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<h2>Download</h2>
<p><a title="Download" href="http://www.paulsrichards.com/files/downloads/jquery.packed.popmenu.1.0.js">Production (944 bytes, packed) v1.0</a><br />
<a title="Download" href="http://www.paulsrichards.com/files/downloads/jquery.popmenu.1.0.js">Development (1.75 Kb) v1.0</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.paulsrichards.com/2008/10/01/jquery-plugin-popmenu/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Persistent sessions with PHP</title>
		<link>http://www.paulsrichards.com/2008/07/29/persistent-sessions-with-php/</link>
		<comments>http://www.paulsrichards.com/2008/07/29/persistent-sessions-with-php/#comments</comments>
		<pubDate>Tue, 29 Jul 2008 20:59:14 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[php]]></category>
		<category><![CDATA[security]]></category>

		<guid isPermaLink="false">http://www.paulsrichards.com/?p=107</guid>
		<description><![CDATA[Persistent sessions is a set of mechanisms created in php that allow authentication to persist across multiple browser sessions (ie closing down the browser). Any session variables you set in php are destroyed and cant be used in further sessions. This means annoyingly that your users must then sign into you site again. Their are]]></description>
			<content:encoded><![CDATA[<p>Persistent sessions is a set of mechanisms created in php that allow authentication to persist across multiple browser sessions (ie closing down the browser). Any session variables you set in php are destroyed and cant be used in further sessions. This means annoyingly that your users must then sign into you site again. Their are some security issues you must be aware of when implementing a system like this.</p>
<p>Persistent sessions weakens the security of your web site, issues like it being accessed on a public computer (you could add a tick box to be remembered) or if you hold security sensitive information. Its a trade off between usability and security. You could even implement a two step security system where by for example you may trust the user to carry out certain procedures from a persistent session such as adding a item to a wish list but require full password validation for procedures such as purchasing a item from a stored credit card number or changing passwords.</p>
<p>When thinking about how to create a system is seems tempting enough just to store the <em>username </em>and <em>password </em>in the cookie and read them off when the user comes back to the web site and automatically log them in. This is bad very idea. A potential hacker could easily gain access to this information and replay it back to your server and gain unauthorised access.</p>
<p>The cookie is the only way standard way to persist data across multiple sessions. So we must store information in this cookie that will provide us with the information in the future to re authenticate the user. Clearly is a security risk so the best we can do is store information that will only be useful for a certain period of time. It would be inadvisable to provide any with permanent access this way.</p>
<p>In the cookie we are going to store 2 pieces of information, a <a href="http://en.wikipedia.org/wiki/Cryptographic_hash_function" target="_blank">hash</a> code representing the <em>username</em>, we&#8217;ll call this a identifier and a key (or token) that is valid only for certain period of time and is regenerated after one use. To create a hash of the <em>username</em> we could do something like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$salt</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;pAulR2&quot;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$identifier</span> <span style="color: #339933;">=</span> <span style="color: #990000;">md5</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$salt</span> <span style="color: #339933;">.</span> <span style="color: #990000;">md5</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$username</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$salt</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>This should be stored in your database alongside your other user details. Remember to always to use some form of &#8216;<em>salt</em>&#8216; when creating hash&#8217;s. This is just a string that is known only to your application and kept secret. This insures that people cant use rainbow tables or take a few educated guesses to reverse the hash.</p>
<p>Next we must create a key (or token), this will be like our temporary password, valid for a certain period of time. We just need a long a string that isn&#8217;t predictable. One could be generated like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$key</span> <span style="color: #339933;">=</span> <span style="color: #990000;">md5</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">uniqid</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">rand</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Again we would need to store this in the database and associate it to the correct user along with another field recording the time span for which it is valid.</p>
<h2>Outline Example</h2>
<p>Ok, you&#8217;ve authenticated your users username and password and they&#8217;ve indicated that they wish to remain logged in for one week.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// This examples assumes you have already connected to a MySQL database</span>
<span style="color: #000088;">$salt</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;pAulR2&quot;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">/*
  You must create a identifier for every user and store it in the database prior implementing this.
  $identifier = md5( $salt . md5($username . $salt ) );
*/</span>
<span style="color: #666666; font-style: italic;">// retrieve the $identifier from the database, I'm going to assume its in a variable called</span>
<span style="color: #666666; font-style: italic;">// $user['identifier']</span>
<span style="color: #000088;">$identifier</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$user</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'identifier'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// create a random key</span>
<span style="color: #000088;">$key</span> <span style="color: #339933;">=</span> <span style="color: #990000;">md5</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">uniqid</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">rand</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">// calculate the time in 7 days ahead for expiry date</span>
<span style="color: #000088;">$timeout</span> <span style="color: #339933;">=</span> <span style="color: #990000;">time</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #cc66cc;">60</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">60</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">24</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">7</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Set the cookie with information</span>
<span style="color: #990000;">setcookie</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'authentication'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;<span style="color: #006699; font-weight: bold;">$identifier</span>:<span style="color: #006699; font-weight: bold;">$key</span>&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$timeout</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">// now update the database with the new information</span>
<span style="color: #000088;">$result</span> <span style="color: #339933;">=</span> <span style="color: #990000;">mysql_query</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;UPDATE `user` SET key = '<span style="color: #006699; font-weight: bold;">$key</span>', timeout = '<span style="color: #006699; font-weight: bold;">$timeout</span>'
WHERE username = '<span style="color: #006699; font-weight: bold;">$username</span>'&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000088;">$result</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #990000;">die</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Invalid query: '</span> <span style="color: #339933;">.</span> <span style="color: #990000;">mysql_error</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Right that takes care of setting the cookie but know we must authorise it when its been detected when the user comes back to the site. On the users first visit you need to implement code like the following:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$salt</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;pAulR2&quot;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">isset</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_COOKIE</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'authentication'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #666666; font-style: italic;">// cookie is set, lets see if its vailed and log someone in</span>
    <span style="color: #000088;">$clean</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000088;">$mysql</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000088;">$now</span> <span style="color: #339933;">=</span> <span style="color: #990000;">time</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #990000;">list</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$identifier</span><span style="color: #339933;">,</span> <span style="color: #000088;">$token</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">explode</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">':'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$_COOKIE</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'authentication'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">ctype_alnum</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$identifier</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #990000;">ctype_alnum</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$token</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$clean</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'identifier'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$identifier</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$clean</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'key'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$key</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$mysql</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'identifier'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">mysql_real_escape_string</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$clean</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'identifier'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$result</span> <span style="color: #339933;">=</span> <span style="color: #990000;">mysql_query</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;SELECT * FROM user
                                       WHERE identifier = '<span style="color: #006699; font-weight: bold;">{$mysql['identifier']}</span>'&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">mysql_num_rows</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$result</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$record</span> <span style="color: #339933;">=</span> <span style="color: #990000;">mysql_fetch_assoc</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$result</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$clean</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'key'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">!=</span> <span style="color: #000088;">$record</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'key'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #666666; font-style: italic;">// fail because the key doesn't match</span>
		<span style="color: #009900;">&#125;</span><span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$now</span> <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #000088;">$record</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'timeout'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #666666; font-style: italic;">// fail because the cookie has expired</span>
		<span style="color: #009900;">&#125;</span><span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$clean</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'identifier'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">!=</span> <span style="color: #990000;">md5</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$salt</span><span style="color: #339933;">.</span><span style="color: #990000;">md5</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$record</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'userID'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span><span style="color: #000088;">$salt</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #666666; font-style: italic;">// fail because the identifiers does not match</span>
		<span style="color: #009900;">&#125;</span><span style="color: #b1b100;">else</span><span style="color: #009900;">&#123;</span>
			<span style="color: #666666; font-style: italic;">/*
                          Success everything matches, now you can process
                          your login functions. The key must be re generated
                          for the next login. But don't increase the timeout to
                          ensure that the user must login in once the time
                          period has passed.
                       */</span>
	        <span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #666666; font-style: italic;">/* failed because the information is not in the
                            correct format in the cookie */</span>
        <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>And remember once you have finished with the cookie delete it!</p>
<p>Sources: <a href="http://www.amazon.co.uk/Essential-PHP-Security-Chris-Shiflett/dp/059600656X/ref=sr_1_1?ie=UTF8&amp;s=books&amp;qid=1220180984&amp;sr=8-1" target="_blank">Essential PHP Security</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.paulsrichards.com/2008/07/29/persistent-sessions-with-php/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Improving table usabiltity with jQuery</title>
		<link>http://www.paulsrichards.com/2008/07/25/improving-table-usabiltity-with-jquery/</link>
		<comments>http://www.paulsrichards.com/2008/07/25/improving-table-usabiltity-with-jquery/#comments</comments>
		<pubDate>Fri, 25 Jul 2008 21:41:32 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[jquery]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.paulsrichards.com/?p=69</guid>
		<description><![CDATA[I&#8217;ve often found reading information quickly and correctly from a large HTML table difficult. I would like to share a small piece of jQuery code I wrote to help improve the readability of large tables. It provides two functions. Highlight the row of the table on which the mouse is hovered over and highlight the]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.paulsrichards.com/files/demos/table_usbility/" target="blank"><img class="alignright size-full wp-image-104" title="Demo picture" src="http://www.paulsrichards.com/wp-content/uploads/2008/07/untitled-1.gif" alt="" width="287" height="129" /></a>I&#8217;ve often found reading information quickly and correctly from a large HTML table difficult. I would like to share a small piece of jQuery code I wrote to help improve the readability of large tables. It provides two functions. Highlight the row of the table on which the mouse is hovered over and highlight the row if clicked on it. Row highlighting allows you to easily track the correct line across the screen while click highlighting enables you remember a particular spot of interest.</p>
<p>All this requires is the latest version of jQuery (version 1.2.6 included in the demo download) and to past in the code provided. You also need a bit of knowledge of HTML and CSS to implement in your own web site.</p>
<p><a title="Download" href="http://www.paulsrichards.com/files/downloads/table_usbility.zip">Download (16kb Zip)</a></p>
<h2><a title="see the demo" href="http://www.paulsrichards.com/files/demos/table_usbility/">See the Demo</a></h2>
<h2>Code</h2>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// improve table usability</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;table&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;tr&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;rowhighlight&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;rowhighlight&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// Add class on single click</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;table&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;tr&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;class&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;rowhighlight_clicked rowhighlight&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;rowhighlight_clicked&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;rowhighlight_clicked&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.paulsrichards.com/2008/07/25/improving-table-usabiltity-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Essential Free PHP Web Development Tools</title>
		<link>http://www.paulsrichards.com/2008/07/05/essential-free-php-web-development-tools/</link>
		<comments>http://www.paulsrichards.com/2008/07/05/essential-free-php-web-development-tools/#comments</comments>
		<pubDate>Sat, 05 Jul 2008 16:05:18 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Web Tools]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://www.paulsrichards.com/?p=64</guid>
		<description><![CDATA[As a PHP web developer I&#8217;ve tried many different tools to aid my work. There are many tools out there to try and I encourage you to do so, but I have complied a list of what consider essential to make your job as easy as possible. If anyone has any useful tools/sites I haven&#8217;t]]></description>
			<content:encoded><![CDATA[<p>As a PHP web developer I&#8217;ve tried many different tools to aid my work. There are many tools out there to try and I encourage you to do so, but I have complied a list of what consider essential to make your job as easy as possible. If anyone has any useful tools/sites I haven&#8217;t listed let me know.</p>
<h2>PHP</h2>
<p><a title="xampp" href="http://www.apachefriends.org/en/xampp.html" target="_blank"><strong>xampp </strong></a>- A cross platform web server including PHP and MySQL along with other tools such as Perl. Easily installs on a Windows machine (though it is cross platform), I recommend the lite version and install it on USB pen for portability.</p>
<p><a title="phpMyAdmin" href="http://www.phpmyadmin.net/home_page/index.php" target="_self"><strong>phpMyAdmin</strong> </a>- A web based tool for administrating MySQL databases, makes setting them up easy. The new version even includes a query builder. This is included with xampp just go to  http://localhost/phpmyadmin.</p>
<p><strong><a title="Zend Framework" href="http://framework.zend.com/" target="_blank">Zend Framework</a></strong> &#8211; A open source object oriented PHP5 framework. Contains easy to use classes to create a modern web app. Has support for many web services such as flickr and Google.</p>
<p><strong><a title="php classes" href="http://www.phpclasses.org/" target="_blank">phpclasses</a></strong> &#8211; This a web site with a massive database of PHP classes. Always look her first as its probably already been done to a high standard.</p>
<h2>Web browsers</h2>
<p><strong><a title="FireFox 3.0" href="http://www.mozilla-europe.org/en/firefox/" target="_blank">FireFox 3.0</a> </strong>- An open source web broswer that supports loads of useful plugins for web developers. Not to mention generally how much better it is then any other.</p>
<p><strong><a title="Web Developer" href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer</a></strong> &#8211; One of the best FireFox plugins ever made. Contains a massive array of tools to help you develop your web site. From window resizing to editing CSS on the fly. Just try it!</p>
<p><a title="IE Tab" href="https://addons.mozilla.org/en-US/firefox/addon/1419" target="_blank"><strong>IE Tab (Windows only)</strong></a><strong> </strong>- A plugin for FireFox that allows you easily to switch your browser window to the Explorer rendering engine. As this is the most widely used browser you have to check your app works in it.</p>
<p><strong><a title="Multiple IE" href="http://tredosoft.com/Multiple_IE" target="_blank">Multiple IE (Windows XP only)</a></strong> &#8211; A great little download that gives you old Internet Explorers (6.0, 5.5, 5, 4, 3) to try your site in. If you like me and upgraded to IE7, how do you check your site in IE6, many people still use it. Pity it doesn&#8217;t work on Vista.</p>
<p><strong><a title="Download Safari" href="http://www.apple.com/safari/" target="_blank">Safari</a> </strong>- Some people use this as a web browser, I guess now its available on windows you could check your site works in it</p>
<h2>Text Editors</h2>
<p><strong><a title="Notepad ++" href="http://notepad-plus.sourceforge.net/uk/site.htm" target="_blank">notepad++</a></strong> &#8211; A free cross platform text editor with useful add-ons such as code highlighting for every language imaginable.</p>
<h2>Other web tools</h2>
<p><strong><a title="X Ray for web devlopers" href="http://" target="_blank">X Ray</a> </strong>- Just add it to your bookmarks and you ready to go, click it, it loads then you can click any element on a page and it will show you the &#8216;CSS box model&#8217;. Very useful when your having pixel problems.</p>
<p><strong><a title="Browser Shots" href="http://browsershots.org/" target="_blank">Browser Shots</a> </strong>- Check you new web site in every browser known to man on any platform in one go. Warning: it doesn&#8217;t always return everything you ask for and it can take a while.</p>
<p><strong><a title="FireFtp" href="http://fireftp.mozdev.org/" target="_blank">FireFtp</a></strong> &#8211; A FireFox plugin, a simple and realiable FTP program, can manage multiple accounts.</p>
<h2>JavaScript &amp; Ajax</h2>
<p><a title="firebug" href="http://getfirebug.com/" target="_blank"><strong>Firebug</strong></a> &#8211; A plugin for FireFox, before this you would go mad debugging your JavaScript with nothing to go on. This provides full details on all errors and detailed information on Ajax requests. I also use it to be nosey on other web sites to see how they work.</p>
<p><strong><a title="jQuery" href="http://jquery.com/" target="_blank">JQuery</a> </strong>- A fast lightweight JavaScript framework. Makes Ajax and HTML manlipation very easy for a modern 2.0 app.</p>
<p><a title="interface for jQuery" href="http://www.eyecon.ro/interface/" target="_blank"><strong>Interface for jQuery</strong></a> &#8211; An additional set of jQuery plugins that provide a mass of additioal functionality for jQuery.</p>
<p><a title="UI" href="http://ui.jquery.com/" target="_blank"><strong>UI for jQuery</strong></a> &#8211; More plugins for jQuery that provide more for jQuery. I believe that interface and UI are being merged.</p>
<p><a title="visual jquery" href="http://visualjquery.com/"><strong>Visual jQuery</strong></a> &#8211; The doucmentation for jQuery can be a little rubbish, this web site lays it out in a simple format to effectivly use it.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.paulsrichards.com/2008/07/05/essential-free-php-web-development-tools/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>jQuery Table sorter</title>
		<link>http://www.paulsrichards.com/2008/06/18/jquery-table-sorter/</link>
		<comments>http://www.paulsrichards.com/2008/06/18/jquery-table-sorter/#comments</comments>
		<pubDate>Wed, 18 Jun 2008 23:03:52 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[jquery]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.paulsrichards.com/?p=57</guid>
		<description><![CDATA[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&#8217;ve seen application that have numerous &#8220;move up&#8221; and &#8220;move down&#8221; buttons that seem to take forever]]></description>
			<content:encoded><![CDATA[<p>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&#8217;ve seen application that have numerous &#8220;move up&#8221; and &#8220;move down&#8221; 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.</p>
<p>Being a massive fan of jQuery I thought there must a easy &#8216;drag and drop&#8217; solution. I regular use the <a title="Interface plugins for jQuery" href="http://interface.eyecon.ro/" target="_blank">interface plugins</a> that covers most of my needs. Though they provide a &#8216;sortable&#8217; 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.</p>
<p>After a long search I eventually came across a plugin solution called &#8216;Table Drag and Drop&#8217;. This simple plugin like all jQuery requires just a small amount of code to get it working.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#mytable&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">tableDnD</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>To apply to a basic table like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>table id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;mytable&quot;</span> border<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;1&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>tbody<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>tr id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;product_1&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>My Product <span style="color: #cc66cc;">1</span><span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>£<span style="color:#800080;">10.00</span><span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>Active<span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>tr<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>tr id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;product_2&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>My Product <span style="color: #cc66cc;">2</span><span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>£<span style="color:#800080;">2.99</span><span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>Not active<span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>tr<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>tr id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;product_3&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>My Product <span style="color: #cc66cc;">3</span><span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>£<span style="color:#800080;">23.49</span><span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>Not active<span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>tr<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>tr id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;product_4&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>My Product <span style="color: #cc66cc;">4</span><span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>£<span style="color:#800080;">19.99</span><span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>Active<span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>tr<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>tr id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;product_5&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>My Product <span style="color: #cc66cc;">5</span><span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>£<span style="color:#800080;">7.99</span><span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>td<span style="color: #339933;">&gt;</span>Not active<span style="color: #339933;">&lt;/</span>td<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>tr<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>tbody<span style="color: #339933;">&gt;&lt;/</span>table<span style="color: #339933;">&gt;</span></pre></div></div>

<p><script src="/files/javascript/jquery.tablednd.js" type="text/javascript"></script> <script type="text/javascript"><!--
$(document).ready(function() {
        $("#mytable").tableDnD();
});
// --></script></p>
<p>This will give you the following results like this (<strong>try dragging the rows</strong>):</p>
<table id="mytable" border="1">
<tbody>
<tr id="product_1">
<td>My Product 1</td>
<td>£10.00</td>
<td>Active</td>
</tr>
<tr id="product_2">
<td>My Product 2</td>
<td>£2.99</td>
<td>Not active</td>
</tr>
<tr id="product_3">
<td>My Product 3</td>
<td>£23.49</td>
<td>Not active</td>
</tr>
<tr id="product_4">
<td>My Product 4</td>
<td>£19.99</td>
<td>Active</td>
</tr>
<tr id="product_5">
<td>My Product 5</td>
<td>£7.99</td>
<td>Not active</td>
</tr>
</tbody>
</table>
<p>I&#8217;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.</p>
<p>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&#8217;s of the table rows in the new order in the table. Just loop these values update the table.</p>
<p>This code uses simple table with some CSS styling and POST an array back to a web sever with the new order.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#mytable2'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">tableDnD</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                onDragClass<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;dragrow&quot;</span><span style="color: #339933;">,</span>
		onDrop<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>table<span style="color: #339933;">,</span> row<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #006600; font-style: italic;">// get the serialized data for transport</span>
		serial <span style="color: #339933;">=</span> $.<span style="color: #660066;">tableDnD</span>.<span style="color: #660066;">serialize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                       <span style="color: #006600; font-style: italic;">// use jQuery ajax function to send information</span>
			$.<span style="color: #660066;">ajax</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				type<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;POST&quot;</span><span style="color: #339933;">,</span>
				url<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;inc/product_controller_ajax.php&quot;</span><span style="color: #339933;">,</span>
				data<span style="color: #339933;">:</span> serial<span style="color: #339933;">,</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#mytable2</span> <span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">2px</span> <span style="color: #993333;">solid</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">border-collapse</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">collapse</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;"><span style="color: #cc66cc;">50</span>%</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.row1</span> <span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#d8dff4</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.row2</span> <span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#f7e8e9</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.dragrow</span> <span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#a70707</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#ffffff</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p><script type="text/javascript"><!--
$(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,
			});
		}
	});
});
// --></script></p>
<style type="text/css"><!--
#mytable2 {
border: 2px solid black;
border-collapse: collapse;
width: 50%;
}
.row1 {
background-color: #d8dff4;
}
.row2 {
background-color: #f7e8e9;
}
.dragrow {
background-color: #a70707;
color: #ffffff;
--></style>
<table id="mytable2" border="1">
<tbody>
<tr id="product_1" class="row1">
<td>My Product 1</td>
<td>£10.00</td>
<td>Active</td>
</tr>
<tr id="product_2" class="row2">
<td>My Product 2</td>
<td>£2.99</td>
<td>Not active</td>
</tr>
<tr id="product_3" class="row1">
<td>My Product 3</td>
<td>£23.49</td>
<td>Not active</td>
</tr>
<tr id="product_4" class="row2">
<td>My Product 4</td>
<td>£19.99</td>
<td>Active</td>
</tr>
<tr id="product_5" class="row1">
<td>My Product 5</td>
<td>£7.99</td>
<td>Not active</td>
</tr>
</tbody>
</table>
<p>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:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
    <span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'mytable2'</span><span style="color: #009900;">&#93;</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$line</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
       <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$line</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// product_2, product_2... etc in new order</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p><span style="text-decoration: underline;"><strong>Links</strong></span></p>
<p><a href="http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/" target="_blank">Table Drag and Drop Web site</a></p>
<p><a href="http://www.paulsrichards.com/files/downloads/jquery.tablednd.js.zip">Download Table Drag and Drop (Local copy version 0.4)</a></p>
<p><a href="http://www.jquery.com" target="_self">jQuery (required)</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.paulsrichards.com/2008/06/18/jquery-table-sorter/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

