Comments (7)
daidensacha
commented on May 24, 2024
Hi,
Thanks for your email, and tip with the color picker issue. I wish I had known how to contact you a week ago, as I’ve working on a project for my studies and that picker was my piece of choice. I was really impressed with the code and the features. But I just couldn’t get it working and was against the wall with a hard submission date for my work.
I will keep it and play with it, and really appreciate that you took the item to email me.
Regards,
Daiden Sacha
… On 8 Apr 2021, at 12:36 am, Carson Sievert ***@***.***> wrote:
Here's a minimal example, adapted from https://github.com/itsjavi/bootstrap-colorpicker#with-bootstrap <https://github.com/itsjavi/bootstrap-colorpicker#with-bootstrap>, which yields the following error:
https://codepen.io/cpsievert/pen/yLgzxqL <https://codepen.io/cpsievert/pen/yLgzxqL>
Uncaught TypeError: Cannot read property 'tip' of undefined
at PopupHandler.createPopover (PopupHandler.js:237)
at PopupHandler.bind (PopupHandler.js:117)
at Colorpicker.init (Colorpicker.js:200)
at new Colorpicker (Colorpicker.js:161)
at HTMLInputElement.<anonymous> (plugin.js:31)
at Function.each (jquery-3.4.1.js:367)
at jQuery.fn.init.each (jquery-3.4.1.js:202)
at jQuery.fn.init._jquery2.default.fn.<computed> [as colorpicker] (plugin.js:24)
at HTMLDocument.<anonymous> (yLgzxqL:55)
at mightThrow (jquery-3.4.1.js:3557)
By the way, if you replace ***@***.***/dist/js/bootstrap.bundle.js with ***@***.***/dist/js/bootstrap.bundle.js in that codepen, things work fine.
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub <#327>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJOABVH6NAQL6ZL6PZSDHLTHTM5TANCNFSM42RVFFXA>.
from bootstrap-colorpicker.
cjbarth
commented on May 24, 2024
I experience an issue with Bootstrap 5 and this control as well. I get an error saying that this.popoverTarget.popover is not a function. When I move back to 4.x, things work fine. Given how different popovers work between Bootstrap 4 and 5, I'm not surprised this is an issue.
from bootstrap-colorpicker.
itsjavi
commented on May 24, 2024
Have you tried loading the popover package separately?
In the "with bootstrap" example, it includes the popover package because it's loading the bootstrap bundle: /unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js
Edit: Ok I see that in BS5 they still have his bundle. As Chris suggested, the popover API might have changed and it's not compatible anymore :(
from bootstrap-colorpicker.
hkvstore
commented on May 24, 2024
For Bootstrap 5, change this line:
bootstrap-colorpicker/src/js/PopupHandler.js
Line 230 in 3cf62bb
if (bootstrap) // Bootstrap 5
this.popoverTip = $(bootstrap.Popover.getInstance(this.popoverTarget[0]).getTipElement());
else // Boostrap 4
this.popoverTip = $(this.popoverTarget.popover('getTipElement').data('bs.popover').tip);from bootstrap-colorpicker.
fritzfr
commented on May 24, 2024
Above solution is not complete. For me, the error is above the mentioned line:
this.popoverTarget.popover is not a function
at PopupHandler.createPopover (bootstrap-colorpicker.js:4188)
from bootstrap-colorpicker.
hkvstore
commented on May 24, 2024
You need to include either bootstrap 4 or 5 .js first.
from bootstrap-colorpicker.
OlivierGrimard
commented on May 24, 2024
For Bootstrap 5.1.3, I was getting the error "Cannot read properties of null (reading 'getTipElement')" so I changed the method getInstance to use getOrCreateInstance.
this.popoverTip = $(bootstrap.Popover.getOrCreateInstance(this.popoverTarget[0]).getTipElement());
this.popoverTip = useGetInstance ? (0, _jquery2.default)(bootstrap.Popover.getInstance(this.popoverTarget[0]).getTipElement()) : (0, _jquery2.default)(this.popoverTarget.popover('getTipElement').data('bs.popover').tip);
To
this.popoverTip = useGetInstance ? (0, _jquery2.default)(bootstrap.Popover.getOrCreateInstance(this.popoverTarget[0]).getTipElement()) : (0, _jquery2.default)(this.popoverTarget.popover('getTipElement').data('bs.popover').tip);
I hope it can help someone.
from bootstrap-colorpicker.
Related Issues (20)
- website can't open by my network! HOT 2
- Extension not working with `inline: false` HOT 1
- bootstrap v5 alpha1 HOT 1
- How to hide the color value input text, replace by free user input HOT 1
- autoInputFallback=false converts #ff0 to #ffff00 but I wasn't done typing yet HOT 1
- .RemoveData() in colorpicker destroy doesn't remove the color data
- Dist files HOT 1
- Container selector won't work if colorpicker target is an input HOT 1
- useAlpha changes formats from RGBA to RGB if alpha is 1 HOT 2
- Disable hex input auto completing HOT 4
- Show picker on input focus together with colorpicker-input-addon HOT 2
- Hue selector gets locked when the color has no saturation (gray scale) HOT 1
- Make it work with webpack and Bootstrap 5
- [BUG] popper.js deprecated
- [FEATURE] Bootstrap5
- Having the input hex value in lower case does not set the picker color
- If, Browser window if zoom to 125% the colour picker doesn't work properly
- Add colour through text field HOT 1
- [BUG] Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-colorpicker.