CODEWITHSUNDEEP
jqueryjquery-pluginscolor-pickerjpicker
Steph
Steph

Reputation: 2185

Unable To Display Multiple jPicker Color Pickers On the Same Page

I am having difficulty getting multiple jPicker instances of the same type to display on the same web page. Here's some sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jpicker-1.1.6/jpicker-1.1.6.min.js"></script>
    <link href="js/jpicker-1.1.6/css/jPicker-1.1.6.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="testArea">
        <script type="text/javascript">            
            $(document).ready(function() {
                $('#Expandable').jPicker( {
                    window: {
                        expandable: true,
                        alphaSupport: true,
                        position: {
                            x: '40px',
                            y: '0px'
                        }
                    },
                    images: {
                        clientPath: "js/jpicker-1.1.6/images/"
                    }
               });
            });
        </script>

        <div id="colorSelectors">
            <input type="checkbox" value="Hamburgers" checked="yes" /> Hamburgers
                <span id="Expandable"></span> <br />
            <input type="checkbox" value="Hot Dogs" checked="yes" /> Hot Dogs
                <span id="Expandable"></span> <br />
        </div>
    </div>
</body>
</html>

Here's what I'm getting:

My Sample Web Page

What's odd to me is that if I use different types of jPickers, I can have multiple instances on the same page, but only one instance of each type. For instance, I can use an "Expandable" picker and an "Inline" picker on the same page, but I cannot use 2 "Inline" pickers on the same page.

The one exception is that I can get multiple instances to work when the jPickers are bound to an <input> element, just like the example on the jPicker website. But I can't this to work for any of the other types of pickers.

Upvotes: 1

Views: 1078

Answers (1)

Musa
Musa

Reputation: 97672

Maybe because have duplicate ids, try using a class instead

$('.Expandable').jPicker( {
...
    <div id="colorSelectors">
        <input type="checkbox" value="Hamburgers" checked="yes" /> Hamburgers
            <span class="Expandable"></span> <br />
        <input type="checkbox" value="Hot Dogs" checked="yes" /> Hot Dogs
            <span class="Expandable"></span> <br />
    </div>

Upvotes: 3

Related Questions