Open Mexicoder opened 5 years ago
I was able to reproduce this using the following steps:
Seems like there's a race condition happening here.
Upon further review, this is the error that is occurring:
Uncaught TypeError: Unable to process binding "colorpicker: function(){return { value:value,format:format} }"
Message: $(...).colorpicker is not a function
at init (23131.js:1225)
at js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1
at Object.ignore (js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1)
at js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1
at Object.arrayForEach (js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1)
at a (js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1)
at l (js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1)
at Object.h.applyBindings (js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1)
at js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1
at js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1
I think we can solve this by replacing the code for the ko.bindingHandlers.colorpicker
with this:
ko.bindingHandlers.colorpicker = {
init: function (element, valueAccessor) {
var params = ko.unwrap(valueAccessor());
function intializeColorPicker() {
if($.colorpicker && $.isFunction($.colorpicker)) {
$(element).colorpicker({
color: params.value(),
format: params.format
}).on('changeColor', function (e) {
var value = $(element).colorpicker('getValue');
params.value(value);
});
clearInterval(initializeInterval);
}
}
var initializeInterval = setInterval(intializeColorPicker, 300);
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
if (initializeInterval) {
clearInterval(initializeInterval);
}
})
}
};
I tested this and it resolves the issue. I'll do a pull request to update our example. This is also a bit of a workaround, as our platform should handle this case better - I'm creating a bug for this in our platform.
I just updated the file https://github.com/agility/CustomFields/blob/master/colorpicker/js/colorpicker-init.js which should be all you need to replace the contents of the script you are using.
Let me know if it works for you!
Awesome this worked for me. So when you say "our platform should handle this case better" do you mean the Agility platform?
Yes, I do. This looks to be a bug in how we handle duplicate dependencies in custom fields when the web app starts.
I'm trying to use multiple custom field color pickers in one module. The first one seems to be rendering fine but the others after are not. Any suggestion as to how to accomplish this?
![image](https://user-images.githubusercontent.com/9352067/57037594-9e7b9600-6c25-11e9-9bc8-ecb6a133d4fc.png)