Custom input elements are definitely an interesting thing. In your case it’s a color picker, others will ask for ZIP code selectors, calendars, knobs styled with Hello Kitty, etc…
At the time of writing (v0.11), Jazzy Forms does not support integration with custom input elements. It’s not as easy as putting some HTML code to the form. Jazzy Forms internally holds data structures that describe the graph of dependencies between form elements. As there may be formulas that need the results of other formulas, it’s crucial to know what element to update first. This dependency graph is needed for the “instant update” feature that is not working in your case.
For the near future I’m planning to add a way to hook into the the plugin and add custom elements. (This will also open the way for a corresponding consulting service.)
Until such a mechanism is in place, the following trick might do the job: use a regular Jazzy Form input element instead of your color picker. Hide it with the element’s “visibility” settings. Then use your own Javascript ninja skills to update the hidden input element with the values from your color picker.
Thanks for your response. What you describe is what I thought I was doing.
I put the (visible) color picker into a free Jazzy HTML element, and styled it to look like a Jazzy Form element, for example, with the use of the label tag and the jzzf_element_label class.
The form also has a hidden Jazzy Form element (with ID csscolor). For this to work, you have to figure out the internal ID of the element (in this case, jzzy_1_csscolor). I use Chrome for this. The onchange event trigger takes the color code from the picker field and puts it into the hidden Jazzy Form field. It is the Jazzy field that I use later on with a {{csscolor}} place holder.
The form looks good and works well with the use of a Jazzy update button. I half expected the onchange event to trigger the “instant” update, since it is changing the value of the Jazzy field, but it doesn’t. I fooled around with code of the form document.getElementById('UpdateButtonID').click to trigger the Jazzy update button, but it is very context specific and I haven’t gotten it to work yet. (I am not an experienced javascript programmer.)
Supporting the instant update feature is not critical to my project: it would just be nice to do. Jazzy Forms made it possible to do what I need with almost no code. I really like the plugin.
I’m not ready to show the actual page where I implemented the color picker. I’ll try to put together a demo page and post a link to it, but that may not happen for a while.
Thanks for the great foundation you have provided with version 0.11. If I am able to generate any income from this project, I’ll certainly donate to your effort.
Rick.
OK, I decided to go ahead and create a demo page showing the use of the JSColor color picker. It seems to me to be generic enough that it might be helpful for anyone trying to implement a special field type in Jazzy Forms. Here is the link:
http://stuff2help.net/demo-color-picker/
ride2719, I’ve taken a look at your example. Your JS code “document.getElementById('jzzf_1_csscolor').value = this.color” changes the value, but it doesn’t trigger a “change” event. On top of that if you do something like jQuery('#jzzf_1_csscolor').change() then the form should get updated.
For anyone who’s reading this: this thread discusses a hacky workaround for adding custom form elements, until Jazzy Forms gets any well-defined way to do so.
Thanks for your response jazzigor. I really appreciate you remaining engaged, particularly when discussing a hack. Until there is a better way, this approach creates a form that looks consistent, and that preserves place marker insertions, which is what I needed. It could also be a template for creating other special fields. I’m looking forward to the evolution of this plugin.
I’m thinking this has gone as far as it needs to go (further, I’m sure, in the opinions of some). I’ll mark it resolved.
