using jscolor.js on dynamic input

Question

i'm using color picker from http://jscolor.com/

i'm trying to attach it to some dynamic inputs, but to no avail. dynamic inputs in terms of, on page load the input doesn't exist, only after the user click on something the input will become available. for example, I have a rows of data, and each row has different background color. this row of data are loaded using ajax. at the end of each row, there's an edit button. by clicking the edit button, it will display an input text box for the clicked row. I want to call the jscolor picker when the user clicks on the input text box. how can I do this?

thanks

Very simillar problem was introduced here: https://stackoverflow.com/questions/43174801/how-to-reinitialize-a-script-in-an-html-document/56521977#56521977 and this one acutally helped in my case of dynamic input. — Volmarg Reiso, Jun 10 '19 at 07:09

score 30 · Answer 1 · answered Jul 11 '16 at 21:54

30

For some reason jscolor.init() did not work for me, and looking at the code I called

jscolor.installByClassName("jscolor");

function.

So...

$(document).ready(function() {
  jscolor.installByClassName("jscolor");
});

Hope it helps

answered Jul 11 '16 at 21:54

Alejandro Díaz

430
4
10

3

this did it for me as well. – Jesus Rodriguez Jul 31 '16 at 22:28
This is now deprecated. – Chewie The Chorkie Oct 28 '20 at 16:19

BStone · Answer 2 · 2014-08-28T14:21:56.377

8

I just had this problem too but luckily it's easy to fix. You need to (re)init jscolor after you have dynamically created your inputs:

jscolor.init()

edited Aug 28 '14 at 14:21

answered Jun 13 '14 at 12:36

BStone

220
2
9

Simplest solution, just we weary of calling it while you're still generating inputs as it could slow things down. – deadboy Jul 02 '14 at 15:26
2

This is not working for me, I get an error saying jscolor.init is not a function :/ Please elaborate if anyone knows how this works now, until then I reset jscolor and load the script again with Jquery... window.jscolor = undefined; $.getScript("../Scripts/jscolor.min.js", function () { }); – mathkid91 Jun 15 '16 at 17:25

score 2 · Answer 3 · answered Nov 21 '13 at 10:23

2

This helped me

<script>
 $(document).on('click', '#myPickerId', function () {
    var obj = $(this)[0];
    if (!obj.hasPicker) {
        var picker = new jscolor.color(obj, {});  //
        obj.hasPicker = true;
        picker.showPicker();
    }
});    
</script>

In my case, the picker control was dynamic because it is inside Knockout.js 'with' statement which hides and recreates the picker when it needs.

answered Nov 21 '13 at 10:23

Maxim Eliseev

3,248
4
29
35

1

What's the point of `$(this)[0]`? Doesn't that just return `this` without any gain? – Carcigenicate Jan 05 '16 at 22:01
@Carcigenicate I think that is because `$(this)[0]` returns an array and `jscolor` requires the actual div element. – iled Jun 15 '16 at 13:25
$(this)[0] gets the actual DOM element, not the jQuery one. – aizquier Mar 06 '17 at 22:06
This was actually the solution for me! Thanks!! – Alex Feb 27 '18 at 09:57

score 2 · Answer 4 · answered Mar 30 '21 at 20:00

2

Got the same problem upon adding input fields dynamically

Managed to make it work by calling jscolor.install();

PS: jscolor v2.4.5

answered Mar 30 '21 at 20:00

Michael Yohanes

125
5

score 0 · Answer 5 · answered May 25 '20 at 22:49

As of 2020, the original problem should be solvable by dynamically creating an input element, and then calling new jscolor(input). Using JQuery (you could use vanilla JS as well):

var color_input = $('<input class="jscolor" spellcheck="false">');
new jscolor(color_input[0]);

This will make the popup picker appear on click, and everything appears to work just fine. However, you cannot manipulate it programmatically. To set the color using the objects above, you would normally use a method like: color_input[0].jscolor.fromString("#B7B7B7"). But that will fail for dynamically created objects, as color_input[0].jscolor is undefined. I believe this is a bug in Jscolor (and probably very easily solvable), as the missing object is actually available with color_input[0]._jscLinkedInstance. So you can just set the object yourself on instantiation with:

var color_input = $('<input class="jscolor" spellcheck="false">');
color_input[0].jscolor = new jscolor(color_input[0]);

And then everything looks to be working as expected. Hopefully this helps someone else that comes across this answer page as I did.

using jscolor.js on dynamic input

5 Answers5

Linked