Input fields should be provided rather than generated
ugate opened this issue · comments
A common JQuery practice is to provide the widget with a vanilla input field that will be used for default values and form submission. Any generated control fields are typically used only for presentation purposes. Currently, the use of the color picker is very limited as it 1) does not produce a form submittable input (no name attribute and the ID is the same for every generated input field) 2) there is no way to listen for changes made to the generated input field due to it's value being set programmatically and no availability of an onchange setting/option (optionally, this can be circumvented by listening to the generated buttons click event, but that's not very elegant).
Thanks for opening this ticket @whoover. I have resolutions to two of your issues and a question on the third:
1: No Name Attribute / All IDs the Same
Sadly Twitter Bootstrap requires that these input fields have the ID appendedPrependedDropdownButton in order to look as they do.
I have updated Pick-a-Color to use the ID of the initializing div as the name of the input field, which should allow you to access it from a form: 127c646#L15R260
2: No Change Event Fired When Text Field Updated Programmatically
These lines in 77f5317 take care of this:
3: Input Fields Should Be Provided Rather Than Generated
I can definitely see why it is nicer conceptually to have the developer using the plugin provide the input field rather than generating it in JS, but I did this to ensure that the proper classes and IDs would be available. Now that issues 1 and 2 are resolved, do you think there are still practical concerns with the current approach that make it less useful than it would be if the input field had to be provided by the developer using the plugin? I'm not opposed to rewriting it that way, but it's a pretty invasive change so I'm curious to hear what you think the implications are.
I think the bigger issue is that if you are using a DIV to then create the input, etc., if you are using AngularJS, KnockoutJS, etc., how do you go about setting up the UI data binding?
Granted, this is a cool plugin, but I don't think I can make use of this plugin because I cannot build the data-bind where it would work, from what I can see. Can you guide me how you folks would overcome this obstacle??
@dealproc That's a great point! I don't have much experience using JS frameworks, so thanks for pointing that out. I will make it a point to rewrite Pick-a-Color to be initialized from an input field instead of a div this month.
@lauren... that's sweet. I need to use this for a project I'm on, so having that is going to fit perfectly.
Thanks Lauren!