10

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

1

5 Answers 5

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

2
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()
2
  • Simplest solution, just we weary of calling it while you're still generating inputs as it could slow things down.
    – deadboy
    Commented Jul 2, 2014 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
    Commented Jun 15, 2016 at 17:25
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.

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

Got the same problem upon adding input fields dynamically

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

PS: jscolor v2.4.5

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.