hooking up a jQuery color picker in dryml

[devcurmudgeon]

i've managed to get a basic color-picker (https://github.com/recurser/
jquery-simple-color) into a hobo form, relatively simply...

<form>
<field-list fields="title, date, background-color">
<background-color-view:><input type="text"
class="simple_color" value='#{this}'/></background-color-view:>
</field-list>
<submit label="#{ht
'milestone.actions.save', :default=>['Save']}"/>
</form>

<javascript name="jquery.simple-color"/>
<script>
jQuery('.simple_color').simpleColor();
</script>

this is enough to populate the picker with the current background-
color from the model, then the picker allows me to select a new
color... but i don't understand how to pass the new color value back
to hobo so that submit will update the record in the model.

can anyone help?

[Bob Sleys]

Looking at the jquery color picker docs I found this

$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
		$(el).val(hex);
		$(el).ColorPickerHide();
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	}
})
.bind('keyup', function(){
	$(this).ColorPickerSetColor(this.value);
});

Based on this you just need to sub class names in the first line to match the class name of your text box ie simple_color and eliminate the two extra fields they used in their example.  If done properly your background-color input but will update when you change the color and thereform change the value that get saved.  However you don't even need the <background-color-view:> tag since the color picker ties into any text input box you just need to know what the input box's id or class is and pass it off to the color picker.  Hobo automaticly gives each field a unique ID so just use it, inspect the html if you need to.

Bob

[devcurmudgeon]

You're right - overriding <background-color-view:> was unnecessary,
and actually gets in the way.

Just the following three lines (plus the js file for the plugin
itself, of course) gives working color-pickers for all fields on a
page with 'color' in their names

<javascript name="jquery.simple-color"/>
<script>

jQuery('input[name*="color"]').simpleColor();
</script>

Thanks, Bob! This was driving me nuts yesterday.
Paul

[Bob Sleys]

Glad I could help.  I spend most days driving myself nuts by making simple things complex.