Spectrum not loading when adding my own settings

Question

I'm using Spectrum color picker plugin. I have 2 color pickers showing. I want the majority of the settings to be the same. The only setting differences is color, localStorageKey, and move: function (color). The rest of the settings should be the same.

I have 1 class - "full", and 2 id's - "first", "second". The settings I want for both of them are in full, and the others are in the id.

The problem is, when I add the settings for first and second, the color picker plugin disappears. What am I doing wrong, and how can I fix it?

JSFiddle

$(".full").spectrum({
     color: false,
        flat: false,
        showInput: true,
        allowEmpty: false,
        showInitial: false,
        showPalette: true,
        showPaletteOnly: false,
        hideAfterPaletteSelect: false,
        showSelectionPalette: true,
        localStorageKey: false,
        showAlpha: true,
        palette: [
            ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
            ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
            ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"]
        ]
    });
    
// The problem is, when the following code gets uncommented:

    /*$("#first").spectrum({
        color: "green",
        localStorageKey: "first",
        
        move: function (color) {
            // Perform Some Code
        }
    });
    
    $("#second").spectrum({
        color: "orange,
        localStorageKey: "second",
        
        move: function (color) {
            // Perform Some Code
        }
    });*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
<link href="http://bgrins.github.io/spectrum/spectrum.css" rel="stylesheet"/>



<a href='http://bgrins.github.com/spectrum'>Spectrum Homepage</a>

<h2>First</h2>
<input type='text' class="full" id="first"/>

<h2>Second</h2>
<input type='text' class="full" id="second"/>

Ari · Accepted Answer · 2015-10-30T23:39:50.810

You forgot to quote the orange string. You give it only 1 quote at the start, when you should put it inside 2 quotes like the following:

 $("#second").spectrum({
        color: "orange",
        localStorageKey: "second",

        move: function (color) {
            // Perform Some Code
 } 
});

Always perform debugging using available tool such as firebug or google chrome web inspector when you find error with your js code.

EDIT

Just found that you can use extend to shorten your color picker code:

// define your color picker object in a variable
var rules = {
        color: false,
        flat: false,
        showInput: true,
        allowEmpty: false,
        showInitial: false,
        showPalette: true,
        showPaletteOnly: false,
        hideAfterPaletteSelect: false,
        showSelectionPalette: true,
        localStorageKey: false,
        showAlpha: true,
        palette: [
            ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
            ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
            ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"]
        ]
    };

// use and add other key value pair it inside the color picker with $.extend method

    // first id
    $("#first").spectrum(        
     $.extend(rules, {
        color: "green",
        localStorageKey: "first",
        move: function (color) {
            alert();
        }
     })
    );

    // second id
    $("#second").spectrum(
        $.extend(rules, {
        color: "orange",
        localStorageKey: "second",
        move: function (color) {
            // Perform Some Code
        }
        })
    );

FIDDLE DEMO

Thank! That fixes the problem, well... halfway. Now the settings aren't applied to it. Here's what I mean. Try commenting out 1 `id` setting. You'll see how only 1 has the full color picker, while the other is only half. — Jessica, Oct 30 '15 at 21:47
It is because you declare the color picker twice into each element, where the last declaration will win and applied at the end! You can separate them to make it working correctly, instead of applying into the same class name at once and give different rules after! I never see any shorter code that can work for declaring color picker! — Ari, Oct 30 '15 at 21:55
Got it. Thanks! That's not convenient at all! (Just curious, have you used this plugin before?) — Jessica, Oct 30 '15 at 21:59
I use it in my current project! I have updated the answer which show how to shorten your color picker's code using jQuery `extend` method! — Ari, Oct 30 '15 at 23:41

Spectrum not loading when adding my own settings

JSFiddle

1 Answers1