jscolor does not init automatically (jQuery)
rez0n opened this issue · comments
Hi,
I new user of jscolor and it everything looks like it should to be initialized automatically on all inputs with the data-jscolor attribute, but it does not.
Actually I have no idea why, but it works correctly on jscolor 2.0.4, but not works with next versions.
jQuery 3.5.1 (if it matter)
No any errors in console (no any actions by jscolor at all)
Hi @rez0n , can you please provide more details? I need to see the actual HTML code.
Or feel free to contact me at dev@jscolor.com if you can't publish it here.
Also, check if there is any relevant error/warning in the developer console. Sorry, you mentioned it.
Hi @EastDesire
This is Bootstrap 4 modal, html for both jscolor versions: https://gist.github.com/rez0n/0bb0424ce42007ee0fea83d075487a56
You can see two jscolor related fields (color and col2)
First one have options and bootstrap css applied, second is raw input for testing purposes.
Once I change jscolor 2.5.1 to 2.0.4 both fields getting alive.
Strange. Actually the HTML you provided seems to work fine (tried firefox and chrome, see below). So maybe the problem is when it's used in combination with bootstrap modal or so.
For modals it is usually necessary to initialize color inputs, e.g. by calling jscolor.install() after the DOM is ready. Please try that and let me know. But if that's the issue, it shouldn't work even with 2.0.4.
Hi @EastDesire
2.0.4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
It initialize field automatically (but only for fist modal open after page refresh, on repeated modal opens it not initialize field automatically)
jscolor.installByClassName('jscolor') solves the issue.
2.5.1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.1/jscolor.min.js"></script>
Not initializes field automatically and install() works only in case if I place js loading before fields in the HTML.
It works partially, field get clolor box but color selection tool does not loads on field focus.
Field HTML at this moment
<input type="text" id="id_color" class="colorfield_field jscolor form-control" name="color" value="#FF0000" placeholder="#FF0000" data-jscolor="{hash:true,width:225,height:150,format:'hex',required:true,paletteCols:4,paletteHeight:28}" required="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-current-color="#FF0000" style="background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 30px, rgba(0, 0, 0, 0) 31px, rgba(0, 0, 0, 0) 100%), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAAAXNSR0IArs4c6QAAAKJJREFUaEPtmMEJwCAMReNMbuAs4k7ehU7gGM7UUqUUvIUPnl4vPdlAMD/vNdRabxOeMYZw2izGKJ331s85z3q99+t9BxrADWAEyAAlhbwhtNciBNkCrEFlAs07gnAAIAQJgsK4ADKEDf46XEqRXOA0yqoonVKan2itrf8BNIAbwAiQAYqNEIKHfZ4tsHXAewNZg3AAIAQJgsK4ADKEDX46/AAE0FSQww486wAAAABJRU5ErkJggg==") !important; background-position: left top, left top !important; background-size: auto, 32px 16px !important; background-repeat: repeat-y, repeat-y !important; background-origin: padding-box, padding-box !important; padding-left: 40px !important;">
I tried another versions and could add some details.
Latest version which initializes correctly by the install() is 2.3.3
But all next version woks good with init() (up to 2.5.1)
The issue you described probably only occurs in combination with some other library/style on the page (not sure if it's bootstrap).
Because if I use the code you provided, it works. See: jscolor-368ff5a61d.html.zip
You might try progressively commenting out the libraries/styles on the page, until you find what causes the problem.
I'm pretty sure there are some issue with modal, but adding jscolor.init() on each modal opening event solved the issue.
Good stuff (-:
Closing the issue.