Color Picker with "Real Time" Database Connection

Hello fellow nerds!

I am trying to do something a little unique. I want to create a color picker that has all Hex colors stored in a mysql DB.

Users have the ability to select a color, then having that color "removed" from the DB making it not available to be chosen by another user.

I want to have the color picker update the user as the user slides around to select a color. Meaning in real time display not only the color the user is hovering over, but also if it is available or not.

If its available then they can select "choose" and being the process of registering to a site.

What are some complications I might have in doing this?

Could the user stay connected to the DB so that a new connection is not made each time they stop on a color?

What type of delays would I be looking at do you think?



short video:
http://screencast.com/t/ywp7aZNI5


Thanks so much for any help!

Travis

 

Well, something like this would be fairly simple to do with PHP and AJAX. You can use (as an example) a JS onmousedown/up to determine if the user is done selecting a colour, once they're done (using onmouseup), fire an AJAX event to query the database and return true or false dependent on the colour being available or not.

 

If you do it onmouseup and ajax, the user would be capable to click many colors resulting in false positives.

Or after first click you should make the colorpicker unactive.

A better approach would be to use a colorpicker js that is linked to a form field.
and the user has to push the submit form button to validate his color... latest approach seems a lot easier and that is how most forms operate.

something like http://jscolor.com/

you could add the ajax part as a first check of availability but what I mean is I wouldn't use the ajax part to lock the color. On pageload you can select all remaining colors (or all locked) and disable those on the colorpicker if that functionality is available